导航守卫
vue-router提供导航守卫主要通过跳转或**取消*的方式守卫导航。有很多方式植入路由导航中：全局的、单个路由独享的，或者组件级的。
全局前置守卫：beforeEach。
每个守卫接收两个参数：
- to：将要进入的目标
- from：当前导航正要离开的路由
const router = createRouter({...})router.beforeEach((to,from)=>{//如果返回false会取消当前导航return true});//跳转到其他路由router.beforeEach((to,from)=>{//可以根据路由的name或path等跳转，需要判断只跳转一次，否则会多次执行if(to.name !== 'about'){return {name:'about'}}//path跳转if(to.fullPath !== '/about'){return '/about'}})
全局解析守卫
可以用router.beforeResolve注册一个全局解析守卫，它在每次导航时都会触发，解析守卫会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。意味着它会在所有都执行完毕就绪后被调用。
router.beforeResolve是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。
router.beforeResolve(to=>{//返回false，路由不会跳转，可以做权限校验等return false})
全局后置钩子
全局后置钩子和守卫不同的是，这些钩子不会接受next函数也不会改变导航的本身
router.afterEach((to,from,failure) => {console.log(to.fullPath)})
路由独享的守卫
可以在路由上直接定义beforeEnter守卫。它只会在进入路由时触发，不会因为改变路径上的变量而触发。可以传入函数数组。
const routes = [{path:'/about/:id',compontent:About,beforeEnter:(to,from){//拒绝导航reture false}}]
组件内的路由配置API
可以为路由组件添加一下API
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
const About = {template:'...',beforeRouteEnter(to,from){// 在渲染该组件的对应路由被验证前调用// 不能获取组件实例this，因为此守卫执行时，组件实例还没被创建},beforeRouteUpdate(to,from){//当前路由改变，但是该组件被复用时调用，比如/user/1，/user/2查询的用户信息不同，可以访问this},beforeRouteLeave(to,from){//在离开渲染该组件的对应路由时调用，可以访问组件实例thisconst answer = window,confirm('Do you want to leave?');if(!ansuer) return false}}
路由元信息
有时想把一些附加信息附加到路由上，比如过渡名称
谁可以访问路由等，这些都可以通过接受属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。
const routes = [{path:'/about',component:About,children:[{path:'new',component:PostNew,meta:{requiresAuth:false //可以在路由守卫中判断这个字段，做逻辑处理}},{path:':id',component:PrivacyPost,meta:{requiresAuth:true}}]}]
