vue-router之学习笔记

用 Vue.js + vue-router 建立单页应用，是很是简单的。使用 Vue.js ，咱们已经能够经过组合组件来组成应用程序，当你要把 vue-router 添加进来，咱们须要作的是，将组件(components)映射到路由(routes)，而后告诉 vue-router 在哪里渲染它们。

1、Vue引用插件

在vue开发过程当中会用到不少插件，例如vue-router、vuex、vue-resource、mint UI、element-ui等，全部插件的引用方式都以下所示：

（这里是利用了vue-cli以及npm+webpack来搭建环境。若是不是，直接引用vue-router.js便可）

---

 

2、路由（vue-router）的基本使用

咱们须要作的是，将组件(components)映射到路由(routes)，而后告诉 vue-router 在哪里渲染它们：

demo

一、在页面上定义导航栏以及对应须要变化的模块

 1 <div id="app">
 2   <h1>Hello App!</h1>
 3   <p>
 4     <!-- 使用 router-link 组件来导航. -->
 5     <!-- 经过传入 `to` 属性指定连接. -->
 6     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 7     <router-link to="/foo">Go to Foo</router-link>  8 <router-link to="/bar">Go to Bar</router-link>
 9   </p>
10   <!-- 路由出口 -->
11   <!-- 路由匹配到的组件将渲染在这里 -->
12   <router-view></router-view>
13 </div>

 

二、在js中定义路由组件以及映射

 1 // 0. 若是使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
 2 
 3 // 1. 定义（路由）组件。
 4 // 能够从其余文件 import 进来
 5 const Foo = { template: '<div>foo</div>' }  6 const Bar = { template: '<div>bar</div>' }  7 
 8 // 2. 定义路由
 9 // 每一个路由应该映射一个组件。 其中"component" 能够是
10 // 经过 Vue.extend() 建立的组件构造器，
11 // 或者，只是一个组件配置对象。
12 // 咱们晚点再讨论嵌套路由。
13 const routes = [ 14   { path: '/foo', component: Foo }, 15   { path: '/bar', component: Bar } 16 ] 17 
18 // 3. 建立 router 实例，而后传 `routes` 配置
19 // 你还能够传别的配置参数, 不过先这么简单着吧。
20 const router = new VueRouter({ 21   routes // （缩写）至关于 routes: routes
22 }) 23 
24 // 4. 建立和挂载根实例。
25 // 记得要经过 router 配置参数注入路由，
26 // 从而让整个应用都有路由功能
27 const app = new Vue({ 28  router 29 }).$mount('#app') 30 
31 // 如今，应用已经启动了！

在使用vue-cli+npm+webpack时第4步建立和挂载根实例还能够这样写：

1 var app = new Vue({
2   el: '#app',
3   router,
4   template: '<App/>',
5   components: { App }
6 })

要注意，当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active

 

---

 

3、动态路由-传参

咱们常常须要把某种模式匹配到的全部路由，全都映射到同个组件。那么，咱们能够在 vue-router 的路由路径中使用『动态路径参数』

 demo

一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，能够在每一个组件内使用。

1 <div id="app">
2   <p>
3     <router-link to="/user/foo">/user/foo</router-link>
4     <router-link to="/user/bar">/user/bar</router-link>
5   </p>
6   <router-view></router-view>
7 </div>

1 const User = {
2   template: '<div>User {{ $route.params.id }}</div>'
3 }
4 const router = new VueRouter({
5   routes: [
6     // 动态路径参数 以冒号开头
7     { path: '/user/:id', component: User }
8   ]
9 })

 上述导航传参还有另外两种方式：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

router.push({ name: 'user', params: { userId: 123 }})

这两种方式都会把路由导航到 /user/123 路径。

 

---

 

4、嵌套路由

 在动态路由的demo中，这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。一样地，一个被渲染组件一样能够包含本身的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>

demo

1 const User = {
2   template: `
3     <div class="user">
4       <h2>User {{ $route.params.id }}</h2>
5       <router-view></router-view>
6     </div>
7   `
8 }

要在嵌套的出口中渲染组件，须要在 VueRouter 的参数中使用 children 配置：

 1 const router = new VueRouter({
 2   routes: [
 3     { path: '/user/:id', component: User,
 4  children: [
 5         {
 6           // 当 /user/:id/profile 匹配成功，
 7           // UserProfile 会被渲染在 User 的 <router-view> 中
 8           path: 'profile',
 9           component: UserProfile
10         },
11         {
12           // 当 /user/:id/posts 匹配成功
13           // UserPosts 会被渲染在 User 的 <router-view> 中
14           path: 'posts',
15           component: UserPosts
16         }
17       ]
18     }
19   ]
20 })

要注意，以 / 开头的嵌套路径会被看成根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是由于没有匹配到合适的子路由。若是你想要渲染点什么，能够提供一个 空的 子路由（例如demo中的UserHome）