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