beforeRouteEnter
和beforeRouteLeave
组件内使用,配合路由使用
router/index.js
const routes = [
{
path: '/home',
name: 'Home',
component: Home,
meta:{
// 只有经过身份验证的用户才能访问
isAuth: true
}
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue'),
meta:{
// 任何人都可以访问此页面
isAuth: false
}
}
]
export default {
name: 'Home',
data(){...},
//通过路由规则,进入该组件时被调用
beforeRouteEnter(to,from,next){
if(to.meta.isAuth){//判断是否有权限
if(localStorage.getItem('user')){
next()//调用next才会往下走
}
}else{
alert("无权限")
}
},
//通过路由规则,离开该组件时被调用
beforeRouteLeave(to,from,next){
next();//必须调用next()才能放行
}
}