项目中用到了vue-router，那么就简单总结一下vue-router的使用。
1.vue-router安装
npm install vue-router --save //也可以通过cnpm安装
通过vue-cli搭建的框架可以看到在router文件夹中的index.js文件有如下：
import Router from 'vue-router'
Vue.use(Router); //如果使用全局的 script 标签，则无须如此（手动安装）。
2. 开始
当把vue-router引入项目中，我们要弄清楚的有两点。
第一，将组件映射到对应的路由。
第二，组件在哪里渲染。
如下第一个例子：
<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>
如上，通过router-link组件进行导航，其中的to属性指定跳转的路由，router-link会被渲染为一个a标签。
如果是模块化编程，首先要导入vue和vue-router，然后Vue.use(vueRouter)。
import Vue from 'vue'
import Router from 'vue-router'
//这两个是路由组件，通过import进来
import Index from '@/components/index/Index';
import BlogPage from '@/components/blog/BlogPage';
Vue.use(Router);
export default new Router({
routes:
[
{path: '/index', name: 'IndexPage', component: Index},//可以看到每个路由对应一个组件
{path: '/blog', name: 'BlogPage', component: BlogPage}
]
})；
//以上创建了路由实例并且通过export暴露出来。然后创建和挂载根实例，这样整个应用都具有路由功能。
const app = new Vue({
router
}).$mount('#app')
3. 动态路由匹配
在某些情况下我们需要某种模式匹配的路由都映射到同一个组件。
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
如上的动态路径，可以匹配/user/1, /user/2, user/foo，等一系列这种模式的路由。
当匹配到某一个路由的时候，会将这些参数存到this.$router.params中。如上匹配的路由参数，我们可以通过this.$router.params.id进行获取。
注意：使用路由参数时，如上面的从/user/1跳转到/user/2，原来的组件是会被复用的，因为两个路由都映射的是同一个组件，这样的设计是具有一定的高效性的。不过关于组件的生命周期的一些钩子函数都无法使用了。
我们可以通过watch进行检测一些路由参数的变化。
4. 嵌套路由
当一个被渲染的组件中可以包含自己的<router-view>。当一个被渲染的组件要渲染自己的子组件，那么需要在路由配置中加上children的配置：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
注意：以/开头的路径会被当做根路径, 所以如果在children中的子路由前面加上/就会在地址栏中显示的是从跟路由显示的路径
5.编程式导航
通过使用<router-link>创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
-
router.push(location)
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> （声明式 ）等同于调用 router.push(...)（编程式）。
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
router.replace(location)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
6.命名视图
有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
7.重定向 和 别名
-
重定向
重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
//重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
//甚至是一个方法，动态返回重定向目标：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
-
别名
『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么『别名』又是什么呢？
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
上面对应的路由配置为：
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
关于vue-router简单的使用就介绍到此了，详细的教程可以去看：
https://router.vuejs.org/zh-cn/essentials/getting-started.html
