vue-router之学习笔记

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

一、Vue引用插件

在vue开发过程中会用到很多插件，例如vue-router、vuex、vue-resource、mint UI、element-ui等，所有插件的引用方式都如下所示：

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

---

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

我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们：

demo

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

 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>

2、在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

---

三、动态路由-传参

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。那么，我们可以在 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 路径。

---

四、嵌套路由

 在动态路由的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）

---