全局守卫
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可以异步 这样可以调用组件数据