vue+element刷新使导航条在相应的路由位置_vue直接访问页面地址与底部导航栏不一致-优快云博客

本文详细介绍了在Vue.js应用中如何根据当前路由动态设置导航栏的活跃选项。通过计算属性根据路由路径返回对应的activeIndex值，解决了刷新页面后导航条位置异常的问题。示例代码展示了如何根据不同路由匹配不同的导航项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚进来，导航显示了默认的选项’3-1‘。修改导航栏，导航发生了变化，路由及页面也改变。刷新页面，这时页面不改变，但导航条位置不一样了。

:default-active="activeIndex"
 data() {
      return {
        activeIndex: '3-1',
      };
    },

把data中的activeIndex去除，改为计算属性，这一步解决纵向导航栏的问题

根据路由通过判断返回计算属性的值

computed: {
      activeIndex() {
        if (this.$route.path === '/park') {
          return '1-1'
        } else if (this.$route.path === '/factory') {
          return '1-2'
        } else if (this.$route.path === '/user') {
          return '1-3'
        } else if (this.$route.path === '/devops') {
          return '1-4'
        } else if (this.$route.path === '/datasubmit') {
          return '2-1'
        } else if (this.$route.path === '/datameasure') {
          return '2-2'
        } else if (this.$route.path === '/datasubmitcurrent') {
          return '2-3'
        } else if (this.$route.path === '/datameasurecurrent') {
          return '2-4'
        } else if (this.$route.path === '/parkmonitor') {
          return '3-1'
        } else if (this.$route.path === '/factorychart') {
          return '3-2'
        } else if (this.$route.path === '/parkreport') {
          return '4-1'
        } else if (this.$route.path === '/factoryreport') {
          return '4-2'
        } else if (this.$route.path === '/factoryreportcurrent') {
          return '4-3'
        }
      }
    }

参考链接https://blog.youkuaiyun.com/weixin_43953518/article/details/115176265