vue 通过路由守卫阻止跳转

前提声明

使用的环境是 vue3，其他版本没做测试仅作参考

---

案例分析

制作一个登陆界面，在点击登录的时候进行匹配账号和密码，成功后再切换组件，如果输错弹出alter。
前提条件：登录是一个嵌套在内部的按钮

---

解决方式

在路由规则内有一beforeEnter()的函数，它是和path,components同级的路由规则属性

//比如 跳转一个/main 的路径 ,并带有 id 和 pw 信息
// <router-link to='/main?id=1&pw=123456'></router-link>
//如果不去阻拦路由的跳转，无论信息是否匹配，
//都会让对应的<router-view>跳转到/main上并显示组件

// * 此时在/main的路由规则中引入 beforeEnter() *
export default new Router({
	routes : [{
		path:'/main',	// 跳转路由路径
		components:{ 'main' : mian},
		// berforeEnter 的三个参数 是系统默认的
		// to指前往的路由 from是指原路由 
		//next是一个方法，只有执行它 路由才会真正会跳转
		beforeEnter: function(to, from, next){
			// id和pw存放在 to.query里面
			if(to.query.id == account & to.query.pw == password){
				next()
			}else{
				alter(账号密码错误)
			}
		}
	]
})

只有在id和pw都满足的情况进行 next()，实现路由的切换，如果不成功就alter一个消息框，不进行next()停留在当前页面

---

注意事项

这个方法只是路由守卫的初级应用，需要更多的内容，需要前往vue-router的官方文档