一、何为导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

二、Vue-Router鉴权的方式

1. 通过vue-router addRoutes 方法注入路由实现控制

添加一条新的路由记录到路由。如果路由有一个 name，并且已经有一个与之名字相同的路由，它会先删除之前的路由。

addRoute(route: RouteRecordRaw): () => void

• 通过请求服务端获取当前用户路由配置，编码为 vue-router 所支持的基本格式（具体如何编码取决于前后端协商好的数据格式），通过调用this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例中去，以实现用户路由。
• addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由！

2. 通过vue-router beforeEach 钩子限制路由跳转

添加一个导航守卫，在任何导航前执行

• 通过请求服务端获取当前用户路由配置，通过注册 router.beforeEach 钩子对路由的每次跳转进行管理，每次跳转都进行检查，如果目标路由不存在于当前路由中，取消跳转，转为跳转错误页。

三、Vue-Router 路由守卫

作用：守卫页面跳转 监听页面跳转 在页面跳转前或者跳转后执行一些操作。
路由的钩子函数 有三个参数 分别是 to到哪儿去 from 从哪儿来 next执行下一步

全局前置守卫

一共有两个

• 路由进入之前 router.beforeEach
• 路由离开之后 router.afterEach

组件级守卫

• 路由进入之前beforeRouterEnter{to,from,next}
• 路由更新之前beforeRouterUpdate{to,from,next}
• 路由离开之前beforeRouterLeave{to,from,next}
• 还有就是单个独享的路由首位