Vue+elementUI侧边导航栏高亮显示问题

  1. 首先给导航栏加上default-active属性,记得加上冒号
        <el-menu
          :default-active="defaultUrl"
          unique-opened

2.然后在data中给参数赋值

  data () {
    return {
      defaultUrl: '/dashboard'
    }
  },

3.获取当前路径并且给参数赋值

  mounted () {
    let href = window.location.href
    this.defaultUrl = href.split('/#')[1]
  },

此时点击浏览器的前进后退按钮仍不能对应高亮显示
4.监听路由变化,动态改变参数的值

  // 监听路由变化
  watch: {
    '$route': 'getPath'
  },
  methods: {
    getPath () {
      this.defaultUrl = this.$route.path
    }
  }

猜你喜欢

转载自blog.csdn.net/weixin_43734732/article/details/85292497