vue使用element-ui，页面刷新，导航栏选中问题

当你在使用纵向导航时，刷新了页面，左侧导航显示了默认的选项，导航发生了变化，而路由及页面并未改变，那怎么让它选中路由的页面呢

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

第一种方法：

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

computed: {
    activeIndex() {
      const arr = this.$route.path.split('/')
      console.log(arr) //根据你的情况看在第几项
      if (arr[1] === 'page2') {
        return '/page2'
      } else if (arr[1] === 'page3') {
        return '/page3'
      } else {
        return '/'
      }
    }
  },

第一种看起来麻烦了点，但也能解决

第二种方法：

<el-menu
   :default-active="$route.path"
   class="menu"
   @select="handleSelect"
 >
   <el-menu-item index="/">
     <i class="el-icon-menu"></i>
     <span slot="title">page1</span>
   </el-menu-item>
   <el-menu-item index="/page2">
     <i class="el-icon-document"></i>
     <span slot="title">page2</span>
   </el-menu-item>
   <el-menu-item index="/page3">
     <i class="el-icon-setting"></i>
     <span slot="title">page3</span>
   </el-menu-item>
 </el-menu>

设置:default-active="$route.path"
让index等于路由

handleSelect (data) {
  this.$router.push({ path: data })
}