vue路由守卫

这里的logMsg保存在Home.vue的data中，默认为""表示不显示。当用户点击确定后，会在h2标签中显示“登录成功，可以跳转到索引”Login(){if(confirm("Areyousureyouwanttologin?")){this.logMsg='登录成功，可以跳转到IndeX';this.$store.commit("登录",true);}else{this.logMsg='登录失败'this.$store.commit("login",false);}}无论是confirm还是login在store中的mutations中触发登录函数（这里给store传false就是注销）在store中直接改变isLog的值state:{isLog:false},mutations：{登录（状态，有效载荷）{状态.isLog=有效载荷；这样，我们就可以将store中的isLog由false变为true或者由true变为false来获得或失去对Index的访问。接下来就是封路，开路。这里我们需要使用beforeEach方法。该方法中的回调函数有to、from、next三个参数，分别代表跳转到的路由名称、from路由名称和下一步要执行的操作（中断跳转，继续跳转或跳转到其他路线）。router.beforeEach((to,from,next)=>{if(to.name!='Index'){next();}elseif(to.name=='Index'&&$store.state.isLog){next();}else{next(false);}})解释一下上面代码中第一个if后置条件的意思是如果要跳转到的路由名称不是Index，则继续执行跳转到需要跳转转发的路由（也就是说不能跳转到Index路由）。第二个if后面的条件表示如果要跳转的路由名称为Index，并且满足登录状态，则可以继续跳转，继续执行跳转（即store中的isLog为true时，就可以成功跳转到Index路由）第三种如果其他情况中断跳转（尤其是想跳转到Index但商店里的isLog为false）4.实际操作在首页点击“GotoAbout”即可跳转到关于并在主页单击“转到索引”。如果你不会跳，你不会在这里张贴地图。跳转（当前isLog默认值为false，跳转会被next(false)打断）。然后我们点击登录按钮，在弹窗中点击确定点击登录后，mutations中的登录函数会将isLon的值改为true，从而满足第二个if判断的条件。同时Home.vue会变成这样，然后我们点击“GotoIndex”进行跳转，跳转是这样的。这时候我们可以回到Home.vue，在弹窗中点击取消，再次更改isLog的值，取消访问权限，其实因为这里的isLog是保存在vuex中的，只要页面是刷新后，isLog的值将恢复为默认的false。实际需要时，可以将isLog的值保存在sessionStorage或localStorage中。