Vue笔记（五）路由进阶

导航守卫

vue-router提供导航守卫主要通过跳转或**取消*的方式守卫导航。有很多方式植入路由导航中：全局的、单个路由独享的，或者组件级的。

全局前置守卫 ：beforeEach。

每个守卫接收两个参数：

to：将要进入的目标
from：当前导航正要离开的路由

javascript 复制代码

    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是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。

javascript 复制代码

    router.beforeResolve(to=>{
        //返回false，路由不会跳转，可以做权限校验等
        return false
    })

全局后置钩子

全局后置钩子和守卫不同的是，这些钩子不会接受next函数也不会改变导航的本身

javascript 复制代码

    router.afterEach((to,from,failure) => {
        console.log(to.fullPath)
    })

路由独享的守卫

可以在路由上直接定义beforeEnter守卫。它只会在进入路由时触发，不会因为改变路径上的变量而触发。可以传入函数数组。

javascript 复制代码

    const routes = [
        {
            path:'/about/:id',
            compontent:About,
            beforeEnter:(to,from){
                //拒绝导航
                reture false
            }
        }
    ]

组件内的路由配置API

可以为路由组件添加一下API

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

javascript 复制代码

    const About = {
        template:'...',
        beforeRouteEnter(to,from){
          // 在渲染该组件的对应路由被验证前调用
          // 不能获取组件实例this，因为此守卫执行时，组件实例还没被创建
        },
        beforeRouteUpdate(to,from){
            //当前路由改变，但是该组件被复用时调用，比如/user/1，/user/2查询的用户信息不同，可以访问this
        },
        beforeRouteLeave(to,from){
            //在离开渲染该组件的对应路由时调用，可以访问组件实例this
            const answer = window,confirm('Do you want to leave?');
            if(!ansuer) return false
        }
    }

路由元信息

有时想把一些附加信息附加到路由上，比如过渡名称

谁可以访问路由等，这些都可以通过接受属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。

javascript 复制代码

    const routes = [
        {
            path:'/about',
            component:About,
            children:[
                {
                    path:'new',
                    component:PostNew,
                    meta:{
                        requiresAuth:false //可以在路由守卫中判断这个字段，做逻辑处理
                    }
                },
                {
                    path:':id',
                    component:PrivacyPost,
                    meta:{
                        requiresAuth:true
                    }
                }
            ]
        }
    ]