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

来源:1-1 课程简介

夜下的猫

2022-03-09

在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"
    })
  }
})

图片描述

写回答

1回答

Dell

2022-03-12

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

0
6
夜下的猫
回复
Dell
这样子,好的,谢谢
2022-03-21
共6条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代,企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程