解决beforeEach导航守卫在路由切换时才触发和路由重复跳转的问题

初版：通过点击导航栏实现切换

下面代码使用了 Element UI 的面包屑组件 el-breadcrumb-item 和 a 标签来展示当前路径的名称。

在这段代码中，将 currentPathName 插值绑定到了 a 标签的文本内容上，这样在页面渲染时会显示当前路径的名称。

<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>
        {{ currentPathName }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPathName: '' // 初始化 currentPathName
    }
  },
  mounted() {
    // 监听路由变化，并更新 currentPathName
    this.$router.beforeEach((to, from, next) => {
      this.currentPathName = to.name;
      next();
    });
  }
}
</script>

升级：输入网址也能切换

如果在直接输入网址访问页面时，并没有经过路由切换，那么 currentPathName 数据可能仍然是初始化的值。这是因为 beforeEach 导航守卫是在路由切换时触发的。

如果希望在直接输入网址时也能正确显示当前路径的名称，可以在组件的 created 钩子函数中获取并设置 currentPathName 的初始值，以确保在组件实例创建时就具有正确的初始值。

以下是一个更新过的示例代码：

<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>
        {{ currentPathName }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPathName: ''
    };
  },
  created() {
    // 获取并设置初始的 currentPathName 值
    this.currentPathName = this.$route.name;
  },
  mounted() {
    this.$router.beforeEach((to, from, next) => {
      this.currentPathName = to.name;
      next();
    });
  }
};
</script>

然后通过网页地址直接访问也能实时监控并更新了。

最终版本：

我发现当我处于首页的时候，我再点击首页就报错了，报了一下错误：

原因：由于vue-router最新版本3.5.2，引入了promise，push、replace方法会返回一个Promise。当传递参数多次且重复，或是没有写成功或失败的回调。会抛出异常，因此出现上面现象版本问题。

解决方案：

在VueRouter上配置路由跳转，在router中的index.js中加上以下代码，注意加在use之前

const routerPush = VueRouter.prototype.push;

VueRouter.prototype.push = function (location) {

    return routerPush.call(this, location).catch(err => {})

};

完整示例：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/Manage.vue'

// 在VueRouter上配置路由跳转，在router中的index.js中加上以下代码，注意加在use之前
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
  return routerPush.call(this, location).catch(err => {})
};

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component:() => import(/* webpackChunkName: "about" */ '../views/Manage.vue'),
    redirect:"/home",//重定向到这
    children:[
      {path:'home', name:'首页', component:() => import('../views/Home.vue')},
      {path:'user', name:'用户管理', component:() => import('../views/User.vue')},
    ]
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// router.beforeEach((to,from,next)=>{
//   localStorage.setItem("currentPathName",to.name) //设置当前的路由名称
//   next()
// })

export default router