vue中的全局前置路由守卫报错

Question

在vue里，为什么使用了 $router.push() 的话，设置全局前置路由守卫（router.beforeEach）会报错，而转换成原生的window.location()就不会报错，另外，使用<router-link>和<a>这两个标签都没问题

代码如下：

<template>
  <header>
    <el-tabs v-model="active" @tab-click="handleClick">
      <el-tab-pane label="sports" name="sports" disabled></el-tab-pane>
      <el-tab-pane label="登录/注册" name="sub" value="sub"></el-tab-pane>
      <el-tab-pane label="用户管理" name="user" value="user" ></el-tab-pane>
      <el-tab-pane label="查询" name="search" value="search"></el-tab-pane>
      <el-tab-pane label="分类" name="classify" value="classify"></el-tab-pane>
      <el-tab-pane label="首页" name="main" value="main"></el-tab-pane>
    </el-tabs>
  </header>
</template>
<script>
export default {
  data(){
    return{
      active:"main"
    }
  },
  methods: {
    handleClick(tab){
      let url = tab.$vnode.data.attrs.value;
      console.log(url);
      let completeUrl = "/" + url;
      this.$router.push(completeUrl);
    }
  },

};
</script>

全局前置路由守卫代码如下：

router.beforeEach((to, from, next) => {
  let user = cookie.gcookie("form");
  let vens = cookie.gcookie("venuesForm");
  let admit = cookie.gcookie("admit");
  if (user || vens || admit) {
    next();
  } else if (
    to.name === "main" ||
    to.name === "Home" ||
    to.name === "Sub" ||
    to.name === "AdmitLog" ||
    to.name === "Admit") {
    next();
  } else {
    next({
      name: "Sub"
    })
  }
})

Answer 1

Dell 2022-03-12 19:09:09

能把报错发上来咱们看一下吗？

• 提问者 夜下的猫 #1

  好的，报错图已经更改进去了，麻烦老师看一看

• Dell 回复 提问者 夜下的猫 #2

  提示你了一下，如果首页要跳转，用redirect

• 提问者 夜下的猫 回复 Dell #3

  那请问一下，为什么用redirect重定向就可以，push就不行了呢，重定向又为什么跟a标签和其他方法能效果一样呢

点开查看后面3条评论