路由守卫是用来保护这个页面切换的过程，确保只有满足一些特定条件的情况下，才能够跳转到其他页面。路由守卫就像一道门神，保护着我们的网站。
譬如说，当你想进入一个需要登录才能查看的页面时，路由守卫可以检测这个情况，如果没有登录，就会拦截跳转操作，并且提示你需要先登录才能查看。
路由守卫本质上是一系列的钩子函数（Hook functions），在路由跳转过程中，它们会被自动触发。我们可以根据需要编写这些函数，来实现用户权限、登录验证、数据加载等功能，以便更好地规划和管理我们的网页应用。
Vue 的路由守卫有三个钩子函数，分别为全局钩子、路由独享钩子、组件内钩子。
- 全局钩子：
beforeEach(to, from, next)：在路由切换开始时调用，可以用来进行一些全局的前置守卫逻辑。afterEach(to, from)：在路由切换完成后调用，可以实现页面切换后的一些后置处理逻辑。beforeResolve(to, from, next)：在路由切换开始时调用，可以用来确保异步路由组件被解析之后执行其他的守卫和路由钩子。
- 路由独享钩子：
beforeEnter(to, from, next)：定义在路由上，只对该路由生效，可以用来进行该路由的前置守卫逻辑。
- 组件内钩子：
beforeRouteEnter(to, from, next)：在组件即将被插入到父组件之前调用，但是此时无法访问 this，需要通过next(vm => {})来访问组件实例。beforeRouteUpdate(to, from, next)：在组件复用时调用，如果组件没有复用，则不会被调用。此时可以访问 this 来进行一些响应式的数据处理。beforeRouteLeave(to, from, next)：在组件即将被导航离开时调用，可以用来进行用户离开该页面时的确认提示。
每个守卫方法接收三个参数：
- to: Route: 即将要进入的目标路由对象
- from: Route: 当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
示例 - 检测用户是否登录
注意！需要将vue-router 降到3.0.0版本，否则路由守卫监听报错
npm uninstall vue-router
npm install vue-router@3.0.0
在 router.beforeEach 中定义的钩子函数有三个参数：
// 在router/index.js 中配置全局的路由守卫 // 路由切换开始前调用 router.beforeEach((to, from, next) => { /* must call `next` */ console.log('to',to.meta.isAuth) // 路由元信息中配置isAuth字段，标识未需要检测登录 // 检测用户数据本地是否缓存 if(to.meta.isAuth && !localStorage.getItem('user')){ // 未登录 next({name:"login"}) }else{ next() } });
to：即将要进入的目标路由对象。from：当前导航正要离开的路由。next：推进函数，调用该函数来 resolve 这个钩子函数。调用next()表示放行路由，调用next(false)表示取消当前的导航，并且浏览器的 URL 不会发生变化，调用next('/')或者其他路径表示重定向。
其中，to 和 from 都是 Route 类型的实例，包含了各种与路由相关的信息，比如路径、参数、匹配到的组件等。next 函数的调用是一个必要的步骤，通过它来告知 Vue-Router 是否执行后续的路由导航操作，允许你进行一些前置守卫逻辑或者登录验证等操作。
