0
点赞
收藏
分享

微信扫一扫

组件内路由守卫

毅会 2023-03-05 阅读 97

简介:

作用:给组件设置权限

beforeRouteEnter(to,from,next){

  通过路由规则,进入该组件时被调用

},

beforeRouteLeave(to,from,next){

  通过路由规则,离开该组件时被调用

},

操作:

主页面的Home组件:

<template>
<div class="home">
<h1>我是Home</h1>
</div>
</template>

<script>

export default {
name: "home",
mounted() { },
// 通过路由规则,进入该组件时被调用
beforeRouteEnter(to, from, next) {
if (to.meta.isAuth){
// 如果本地存储的Nuber值为yang就跳转,反之弹出权限不够弹出权限不够
if (localStorage.getItem('Nuber') === 'yang') {
next()
} else{
alert('权限不够')
}
} else{
next()
}
},
// 通过路由规则,离开该组件时被调用 控制路由离开
beforeRouteLeave(to,from,next){
next()
},

};
</script>

组件内路由守卫_本地存储

 

 如果不给 beforeRouteLeave 设置next() 那么路由就不会进行跳转 ;可以进行判断不填写什么不让跳转路由

beforeRouteLeave(to,from,next){

},

组件内路由守卫_本地存储_02

 



举报

相关推荐

0 条评论