element-ui中的NavMenu导航组件路由切换时仅地址栏路由改变而 ＜ router-view＞中的内容及导航栏选中不高亮的问题（已解决）

element-ui中的NavMenu导航组件路由切换时仅地址栏路由改变而 < router-view>中的内容及导航栏选中不高亮的问题（已解决）

bug录制：

代码：

     <el-menu
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        background-color="#363b40"
        text-color="#dcdcdd"
        active-text-color="#ffd04b"
        router>    
        <el-menu-item index="/course">
          <i class="el-icon-menu"></i>
          <span slot="title">课程管理</span>
        </el-menu-item>
        <el-menu-item index="/teacher">
          <i class="el-icon-s-custom"></i>
          <span slot="title">教师管理</span>
        </el-menu-item>
        <el-menu-item index="/student">
          <i class="el-icon-user-solid"></i>
          <span slot="title">学生管理</span>
        </el-menu-item>
      </el-menu>
      <!--组件出口-->
      <router-view></router-view>

//js没写东西，贴出来顺眼一点
export default {
  name: 'NavigationView',
  data () {
    return {}
  },
  methods: {}

}

这个问题卡了我一天，网上找的各种方法都试过了，都没用。后来在浏览器安装了vue.js devTools插件，发现点击导航栏跳转后组件好像一直处于挂载状态。。。。tnnd。。真搞不懂。。。

正常应该如下图所示

解决办法

将组件出口用< keep-alive>< /keep-alive>包裹起来,添加activated方法。

<keep-alive>
  <router-view></router-view>
</keep-alive>

//js
export default {
  name: 'NavigationView',
  data () {
    return {}
  },
  methods: {},
  activated () {
    this.initData()
  }
}

修改后效果：