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>

Vue笔记八:链式路由跳转和路由守卫_第1张图片
点击后,跳转
Vue笔记八:链式路由跳转和路由守卫_第2张图片

路由守卫

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

全局路由守卫

假如有三个组件,分别是登录组件,商品详情组件,购物车组件,当用户点击商品详情组件时,可以直接进入组件,当单击购物车组件时,需要判断是否登录,如果登录了就可以直接进入购物车页面,如果没登录则需要先登录
首先,在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>

如上代码,组件内守卫的作用是:当点击订单页面时,若为未登录状态则会跳转到登录页面,若为登录状态则才跳转为订单页面。
上面的组件内离开守卫的作用,当点击离开时,会有弹窗提示。(登录状态)
Vue笔记八:链式路由跳转和路由守卫_第3张图片

你可能感兴趣的:(Vue,vue.js,javascript,前端)