Vue笔记八：链式路由跳转和路由守卫

链式路由跳转

链式路由跳转就是在方法中进行跳转
普通的路由跳转方式

<router-link to="/test1">普通方式<br></router-link>

链式

<template>
	<div>
		<router-link to="/test1">传统方式<br></router-link>
		<button type="submit" @click="mybtn">链式路由跳转</button>
	</div>
</template>

<script>
	export default{
		name:"test3",
		methods:{
			mybtn(){
				this.$router.push({path:'/test1'})
			}
		}
	}
</script>

点击后，跳转

路由守卫

路由守卫就是在进入页面之前做一层判断，如果没有守卫，就可以直接进入页面，如果添加了路由守卫，则需要做页面跳转。

全局路由守卫

假如有三个组件，分别是登录组件，商品详情组件，购物车组件，当用户点击商品详情组件时，可以直接进入组件，当单击购物车组件时，需要判断是否登录，如果登录了就可以直接进入购物车页面，如果没登录则需要先登录
首先，在main.js中添加

router.beforeEach((to,from,next) => {
	// to表示要去的新页面
	// from表示旧页面
	// next表示是否放行
	// 0表示未登录，1表示已经登录
	var islogin=0
	if(to.meta.needAuth){
		if(islogin==0){
			router.push({path:'/mylogin'})
		}
		if(islogin==1){
			next()
		}
		
	}
	else{
		// 如果没有needauth属性则直接放行
		next()
	}
	
})

其次在组件添加相应的跳转

	<router-link to="/mydetail">商品页面<br></router-link>
		<router-link to="/mycart">购物车<br></router-link>

然后，运行即可发现，点击购物车，出现的是登陆界面

组件内路由守卫

组件内路由守卫，包括组件进入时的守卫和组件离开时的守卫，分别是beforeRouteEnter和beforeRouteLeave，
知识点：（1）组件内守卫不用meta属性
（2）组件内守卫跳转用next（），而不是$router.push（）
创建组件order.vue，在相应组件加跳转

<router-link to="/order">订单<br></router-link>

order.vue

<template>
	<h1>订单组件</h1>	
</template>

<script>
	export default {
		beforeRouteEnter:(to,from,next)=>{
			var islogin=0;
			if(islogin==0){
				next({path:'/mycart'})
			}
			else{
				next();
			}
		},
		beforeRouteLeave:(to,from,next)=>{
			if(confirm('是否离开页面？')){
				next()
			}
		}
	}
</script>

如上代码，组件内守卫的作用是：当点击订单页面时，若为未登录状态则会跳转到登录页面，若为登录状态则才跳转为订单页面。
上面的组件内离开守卫的作用，当点击离开时，会有弹窗提示。（登录状态）