vue+element导航栏高亮显示的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_36146776/article/details/82386764

用导航菜单时遇到的一些问题：点击打开官网例子

问题1：页面强制刷新，按F5时，页面如果没有好好设置的话，导航栏默认叠起来，而且无高亮显示；刷新后导航栏显示和之前不一致，如图所示

解决：

html关键代码设置 :default-active="defaultUrl"

这样设置后，无论如何刷新页面，页面都会高亮显示当前url

问题2：

点击浏览器前进后退按钮导致高亮显示不同步，

解决问题关键，和问题一原理一样，当路由变化时，改变默认显示高亮的值

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