Vue笔记(五)路由进阶

导航守卫

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

全局前置守卫:beforeEach。
每个守卫接收两个参数:

  1. to:将要进入的目标
  2. 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){
            //在离开渲染该组件的对应路由时调用,可以访问组件实例this
            const 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
                    }
                }
            ]
        }
    ]

你可能感兴趣的:(Vue,vue.js,笔记,javascript)