Vue.js——全局守卫
全局守卫
const routes=[
{path:'/',name:"homeLink",component:Home},
{path:'/menu',component:Menu},
{path:'*',redirect:'/'}
]
const router=new VueRouter({
routes,
mode:"history"
})
router.beforeEach((to,from,next)=>{
//判断 store.gettes.isLogin===false
if(to.path=='/login' || to.path=='/register'){
next();
}else{
alert("还没有登录，请先登录");
next('/login')
}
})组件守卫
const routes=[
{path:'/',name:"homeLink",component:Home},
{path:'/admin',component:Admin,
beforeEach:(to,form,next)=>{
if(store.gettes.isLogin===false){
alert("还没有登录，不能访问此页面！");
next('/login')
}else{
next();
}
}
},
{path:'*',redirect:'/'}
]进入路由后
export default{
data(){
return {
name:"Henry"
}
},
beforeRouteEnter: (to,from,next) =>{
next(vm=>{
alert("Hello " + vm.name)
})
},
beforeRouteLeave: (to,from,next) =>{
if(confirm("确定离开吗？")==true){
next()
}else{
next(false)
}
}
}
//vm可以异步 这样可以调用组件数据