在实际开发中，用 Vue.js + vue-router 创建单页应用，是非常简单的。
在使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。
image
一、Vue-Router
- ** 基本使用**
image
- HTML部分：
> <script src="https://unpkg.com/vue/dist/vue.js"></script>
>
> <script src="https://unpkg.com/vue-router/dist/vue-router.js">
>
> </script>
>
> <div id="app">
>
> <h1>Hello App!</h1>
>
> <p>
>
> <!-- 使用 router-link 组件来导航. -->
>
> <!-- 通过传入 `to` 属性指定链接. -->
>
> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
>
> <router-link to="/foo">Go to Foo</router-link>
>
> <router-link to="/bar">Go to Bar</router-link>
>
> </p>
>
> <!-- 路由出口 -->
>
> <!-- 路由匹配到的组件将渲染在这里 -->
>
> <router-view></router-view>
>
> </div>
- JavaScript
> // 0\. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
>
> // 1\. 定义（路由）组件。
>
> // 可以从其他文件 import 进来
>
> const Foo = { template: '<div>foo</div>' }
>
> const Bar = { template: '<div>bar</div>' }
>
> // 2\. 定义路由
>
> // 每个路由应该映射一个组件。 其中"component" 可以是
>
> // 通过 Vue.extend() 创建的组件构造器，
>
> // 或者，只是一个组件配置对象。
>
> // 我们晚点再讨论嵌套路由。
>
> const routes = [
>
> { path: '/foo', component: Foo },
>
> { path: '/bar', component: Bar }
>
> ]
>
> // 3\. 创建 router 实例，然后传 `routes` 配置
>
> // 你还可以传别的配置参数, 不过先这么简单着吧。
>
> const router = new VueRouter({
>
> routes // （缩写）相当于 routes: routes
>
> })
>
> // 4\. 创建和挂载根实例。
>
> // 记得要通过 router 配置参数注入路由，
>
> // 从而让整个应用都有路由功能
>
> const app = new Vue({
>
> router
>
> }).$mount('#app')
>
> // 现在，应用已经启动了！
二、案例实操
image
image
image
image
运行结果：
image
三、命名路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
比如：
const routes = [
{ path: '/html5', name: 'html5', component: Html5 }, { path: '/ios', name: 'iOS', component: IOS }, { path: '/', redirect: '/html5'} //定义根路由指向 ]
<router-link class="list-group-item" :to="{ name: 'html5' }">
H5学院 </router-link> <router-link class="list-group-item" :to="{ name: 'iOS', params:{ id: 12345, name:'iOS快速入门' } }"> iOS学院</router-link>
<template id="ios">
<div> <h2>iOS学院</h2> <p> 这是一个充满大神的学院!! id是{{ $route.params.id }}, {{ $route.params.name }} </p> </div></template>
router-link 标签的常用属性
router-view 标签的使用
四、路由嵌套
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。以下是案例实操部分：
image
image
image
image
image
运行结果：
image
五、路由对象
在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。
路由对象（route object）主要包括以下属性：
$route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar";
$route.params 一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象;
route.query.user == 1，如果没有查询参数，则是个空对象;
$route.name 当前路由的名称，如果有的话;
$route.hash 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串;
$route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径;
$route.matched 一个数组，包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。
案例实操
<div class="row">
<div class="col-xs-offset-2 col-xs-8"> <div class="well"> <p>当前路径：<code>{{$route.path}}</code></p> <p>当前参数：<code>{{$route.params | json}}</code></p> <p>路由名称：<code>{{$route.name}}</code></p> <p>路由查询参数：<code>{{$route.query | json}}</code></p> <p>路由匹配项：<code>{{$route.matched | json}}</code></p> </div> </div></div>
运行结果：
image
六、钩子函数
6.1 什么是钩子函数？
路由的切换过程，本质上是执行一系列路由钩子函数，钩子函数总体上分为两大类：
全局钩子函数
组件的钩子函数
全局的钩子函数定义在全局的路由对象中，组件的钩子函数则定义在组件的route选项中。
6.2 全局钩子函数
beforeEach：在路由切换开始时调用
afterEach：在每次路由切换成功进入激活阶段时被调用
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...})
router.afterEach(route => {
// ...})
参数：
to: Route: 即将要进入的目标 路由对象。
from: Route: 当前导航正要离开的路由。
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
参考：组件的钩子函数
(http://router.vuejs.org/zh-cn/advanced/navigation-guards.html)
网友评论