本文共 774 字，大约阅读时间需要 2 分钟。

前提声明

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

案例分析

制作一个登陆界面，在点击登录的时候进行匹配账号和密码，成功后再切换组件，如果输错弹出alter。

解决方式

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

//比如 跳转一个/main 的路径 ,并带有 id 和 pw 信息// 
   //如果不去阻拦路由的跳转，无论信息是否匹配，//都会让对应的
   
    跳转到/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的

转载地址：http://rxgwi.baihongyu.com/