Vue 独享路由守卫

1、位置

src/router/index.js

写在路由中

2、顺序

在全局 前置守卫 执行后执行

2、语法

{
    path:'news',
    component: NewsData,
    meta:{isAuth:true, title:'新闻'},
    beforeEnter: (to, from, next) => {
        // ...
        console.log('beforeEnter')
        next()
    }
}

有 to from next参数 , to里面也有meta

3、使用

{
    path:'news',
    component: NewsData,
    meta:{isAuth:true, title:'新闻'},
    beforeEnter: (to, from, next) => {
        // ...
        // console.log('beforeEnter')
        if(to.meta.isAuth){
            // 参与部分
            if(localStorage.getItem('name')==='jojo'){
                next()
            }else{
                alert("用户名不对")
            }
        }else{
            // 不参与的直接next
            next()
        } 
    }
}

 4、注意:独享守卫 没有afterEnter

posted @ 2025-01-08 22:35  市丸银  阅读(12)  评论(0)    收藏  举报