导航守卫与keep-alive缓存

1、组件内守卫 (user.vue)

//进入前执行
		beforeRouteEnter(from,to,next){
			console.log(from);
			console.log(to);
			if(localStorage.token){
				next(true);   //允许你继续下一步操作
				// next(false);   //不允许你继续下一步操作
			}else{
				next('/login?from=/user')
			}
		},
		//离开前执行
		beforeRouteLeave(from,to,next){
			if(confirm("真的要离开吗?")){
				next(true);   //允许你继续下一步操作
			}
		},

2、路由独享守卫(路由index.js)

//路由独享守卫
	beforeEnter(from,to,next){
		console.log(from);
		console.log(to);
		if(localStorage.token){
			next(true);   //允许你继续下一步操作
			// next(false);   //不允许你继续下一步操作
		}else{
			next('/login?from=/about')
		}
	}

3、路由导航守卫

meta字段（元数据）：

直接在路由配置的时候，给每个路由添加一个自定义的meta对象，

在meta对象中可以设置一些状态，来进行一些操作

//前置守卫
router.beforeEach((to,from,next)=>{
	console.log(to);
	//to:即将进入的页面
	if(to.meta.requireAuth){
		if(localStorage.token){
			next(true);   //如果已登录就放行
		}else{
			next('/login?from='+to.path)
		}
	}else{
		next(true); //不需要权限验证就放行
	}
})

//后置守卫
router.afterEach((to,from)=>{
	 console.log("进入后执行");
})

keep-alive缓存

概念:keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，

防止重复渲染DOM。 结合vue-router中使用，可以缓存某个view的整个内容。

index.js:meta:{keep:true}
app.vue:
   <keep-alive v-if='$route.meta.keep'>
       <router-view />
   </keep-alive>