作为一个刚入门前端Vue框架的小白必须要掌握的就是这款功能强大的Vue.js官方的路由管理器
一、NPM安装vue-router
npm install vue-router
如果在模块化工程中使用它，必须要通过Vue.use( ) 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
项目中写入这就算是已经启用了vue-router。
二、配置动态路由匹配
例如有一个User组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
以上的实例是官方的一个理解。
三、在Vuecli项目开发中的使用
但是在实际项目中尤其是遇到多页面富应用的项目，基础应该这样运用vue-router：
先在src文件夹下创建router目录后创建index.js和routes.js,然后在main.jsz中调用router
在index.js下调用VueRouter插件，并创建路由列表
然后把路由列表全放在routes里面整理，遵循程序设计单一职责原则，这样方便管理和维护使用。
四、路由守卫
这是全局前置守卫，当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数：
-
to: Route: 即将要进入的目标路由对象 -
from: Route: 当前导航正要离开的路由 -
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖next方法的调用参数。
五、全局后置钩子
你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
好了，以上就是对vue-router在项目开发中基础使用的方法和总结。
