全面解析vue router 基本使用(动态路由，嵌套路由(2)

日期：2020-05-11 栏目：程序人生浏览：次

const routes = [
 { path: '/home', component: Home },
 { path: '/about', component: About }
]

　　最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。

const router = new VueRouter({
  routes // routes: routes 的简写
})

　　配置完成后，把router 实例注入到 vue 根实例中,就可以使用路由了

const app = new Vue({
 router
}).$mount('#app')

　　执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性，它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} path 一一对应，从而找到了匹配的组件，最后把组件渲染到 <router-view> 标签所在的地方。所有的这些实现才是基于hash 实现的。

vue-cli 创建一个项目体验一下, 当然不要忘记安装vue-router

　　1, 在src 目录下新建两个组件，home.vue 和 about.vue

<template>
 <div>
  <h1>home</h1>
  <p>{{msg}}</p>
 </div>
</template>
<script>
 export default {
  data () {
   return {
    msg: "我是home 组件"
   }
  }
 }
</script>
<template>
 <div>
  <h1>about</h1>
  <p>{{aboutMsg}}</p>
 </div>
</template>
<script>
 export default {
  data () {
   return {
    aboutMsg: '我是about组件'
   }
  }
 }
</script>

　　2, 在 App.vue中定义<router-link > 和 </router-view>

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <header>
 <!-- router-link 定义点击后导航到哪个路径下 -->
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
 </header>
 <!-- 对应的组件内容渲染到router-view中 -->
 <router-view></router-view> 
 </div>
</template>
<script>
export default {
 
}
</script>

　　3, 在 src目录下再新建一个router.js 定义router, 就是定义路径到组件的映射。

import Vue from "vue";
import VueRouter from "vue-router";
// 引入组件
import home from "./home.vue";
import about from "./about.vue";
// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);
const routes = [
 {
  path:"/home",
  component: home
 },
 {
  path: "/about",
  component: about
 }
]
var router = new VueRouter({
 routes
})
export default router;

　　4，把路由注入到根实例中，启动路由。这里其实还有一种方法，就像vuex store 注入到根实例中一样，我们也可以把vueRouter 直接注入到根实例中。在main.js中引入路由，注入到根实例中。

转载注明出处：http://www.heiqu.com/484.html

全面解析vue router 基本使用(动态路由，嵌套路由(2)

相关推荐