vue生命周期总结

包含页面的生命周期以及路由的生命周期

页面内:


路由内:

独享路由

{
    name: 'generator',
    path: 'generator', //此处不用写'/'
    component: () => import('../views/MenuOne/pages/generator.vue'),
    meta: {
        isAut: true
    },
        // 路由独享守卫
    beforeEnter(to, from, next) {
            const user = sessionStorage.getItem('user')
        if(user?.name=='admin'||false){
            next()
        }else{
            Message.warning('此页面仅限管理员查看')
        }
    }
},

 全局路由守卫

// 全局前置路由守卫,每次路由切换之前调用
router.beforeEach((to, from, next) => {
    const token = sessionStorage.getItem('token')
    if (to.meta.isAut == true) { //需要鉴权
        if (token) { //存在token
            next()
        } else {
            next({
                path: '/login'
            }) //找不到登录信息,返回登录页
        }
    } else {
        next(); //不需要鉴权则放行
    }
})

vue生命周期总结_第1张图片

你可能感兴趣的:(vue.js,javascript,前端)