在 Vue 中配置路由分为 5 个步骤，分别是：
- 安装
npm install --save Vue-Router
- 引用
import VueRouter from 'Vue-Router'
- 配置路由文件
var router = new VueRouter({
routes:[
{
path:"/hello",
component:HelloWorld
},
{
path:"/wen",
component:HelloWen
new Vue({
el: '#app',
components: { App },
router,
template: '<App/>'
})
- 视图加载的位置
默认 App.Vue 文件中加<router-view></router-view>
- 跳转导航
<router-link to="/hello">helloword</router-link>（渲染出来的是 a 标签）
Vue-Router 的路由守卫分类
路由守卫为： 全局守卫：beforeEach 后置守卫：afterEach 全局解析守卫：beforeResolve 路由独享守卫：beforeEnter
Vue-Router 的钩子函数
关于 Vue-Router 中的钩子函数主要分为 3 类
- 全局钩子函数要包含 beforeEach
beforeEach 函数有三个参数,分别是:
to:router 即将进入的路由对象
from:当前导航即将离开的路由
next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed （确认的）否则为 false,终止导航。
- 单独路由独享组件 beforeEnter
- 组件内钩子 beforeRouterEnter，
beforeRouterUpdate,
beforeRouterLeave
