有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue 路由导航守卫

vue cat 7个月前 (03-12) 74次浏览 已收录 0个评论 扫描二维码

1.全局前置守卫

每次发生路由的导航跳转时,都会触发全局前置守卫。因此,在全局前置守卫中,程序员可以对每个路由进行
访问权限的控制

// 创建路由实例对象
const router = new VueRouter({})

// 调用路由实例对象的beforeEach 方法,即可声明“全局前置守卫”
// 每次发生路由导航跳转的时候,都会自动触发fn这个"回调函数”
router.be foreEach(fn)

守卫方法的 3 个形参

全局前置守卫的回调函数中接收 3 个形参,格式为:

// 创建路由实例对象
const router = new VueRouter({})

// 全局前置守卫
router.befooreEach((to,from,next)=>{
    // to 是将要访问的路由信息对象
    // from 是将要离开的路由信息对象
    // next 是一个函数,调用next()表示放行,允许这次路由导航
})

控制后台主页的访问权限:

router.befooreEach((to, from, next) => {
    if (to.path === /main) {
        const token localStorage.getItem('token')
    if (token) {
        next()  //访问的是后台主页,且有 token 值
    } else {
        next('/login')  //访问的是后台主页,但是没有 token 值
    }
}else {
    next()  //访问的不是后台主页,直接放行
}
})
to,from,next
to:表示要去的路由信息
from:表示从何处来的路由信息
next() 调用此函数表示允许通过


1、全局前置守卫 beforeEach((to,from,next)=>{}) 在router/index.js使用

2、全局后置钩子 afterEach((to,from)=>{}) 没有next 在
router/index.js中使用

3、路由独享守卫 beforeEnter(to,from,next){} 在router/routes.js 守卫单个路由

4、组件内的守卫 在组件内使用
beforeRouteEnter(to,from,next){} 组件实例创建之前调用 比beforeCreate还早 无法访问this
beforeRouteUpdate (){} 当动态路由发生改变时触发 手动
beforeRouteLeave(to,from,next){} 组件即将要离开时执行
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址