vue中对 router-link 的跳转进行判断及中止

vue 文章 2021-11-19 10:31 13 0 全屏看文

www.bili123.com里增加了实验室模块。所以加入了代码:

<router-link  to="/lab">三叔实验室</router-link>

后来想到因为要进行身份识别,所以要加入一个校验,如果没登陆就不可以登陆。

所以又加入了:

<router-link @click.native="check_login" to="/lab">三叔实验室</router-link>

但是我发现我的 check_login里如论怎么返回 都无法阻止进入 lab 路由。

所以在查阅文档后改为:

<router-link @click.native="check_login" to="/lab">三叔实验室</router-link>

//method里追加方法
check_login(){
  if(window.sessionStorage.getItem('hash') == null){
	this.$message.error('请先点击右上角的登陆,登陆后才能进入试验室');
   return;
  }
   this.$router.push('/lab');
}

这样就完成了校验。

image.png

-EOF-