vue3使用侦听器监听路由的变化，实现浏览器回退pc侧边栏高亮改变

小白猿

已于 2023-04-05 17:16:29 修改

阅读量1.1k

点赞数 2

分类专栏：前端开发 element plus vue 文章标签： javascript vue elementui 前端 vue.js

于 2021-09-02 15:29:18 首次发布

本文链接：https://blog.csdn.net/qq_42386231/article/details/120062247

版权

前端开发同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

vue

17 篇文章 1 订阅

订阅专栏

element plus

3 篇文章 0 订阅

订阅专栏

1、在date里面声明

// 记录当前的路由
defaultUrl: "",

2、监听路由变化，当路由变化时执行 “getPath” 方法

// 监听路由变化
  watch: {
    $route: "getPath",
  },

3、编写执行逻辑

// 监听路由变化
    getPath() {
      // 拿到最新的路由
      this.defaultUrl = this.$route.path;
      if (this.defaultUrl == "/home/todayappointment") {
        this.tabIndex = "1";
      } else if (this.defaultUrl == "/home/packagesales") {
        this.tabIndex = "2";
      } else if (this.defaultUrl == "/home/servicewriteoff") {
        this.tabIndex = "3";
      } else if (this.defaultUrl == "/home/servicerecord") {
        this.tabIndex = "4";
      }

      // 本地存储高亮下标(使用本地存储，可解决页面刷新导航栏高亮问题)
      sessionStorage.setItem("tabIndex",this.tabIndex)
    },