前端开发框架VUE之路由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 在哪里渲染它们：

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

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 的路由路径中使用『动态路径参数』

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

例1：
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>

例2：
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 })

四、嵌套路由
 在动态路由的demo中，这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>
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）