Vue页面手动刷新,实现导航栏激活项还原到初始状态

<template>
 <el-menu :default-active="defaultActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
 　　　 <el-menu-item index="/">工作台</el-menu-item>
　　　　<el-menu-item index="/enterpriseManager">企业管理</el-menu-item>
　　　　<el-menu-item index="/orderManager">订单管理</el-menu-item>
　　　　<el-menu-item index="/systemManager">系统管理</el-menu-item>
　　</el-menu>
</template>
<script>
export default {
 name: 'app',
 data () {
  return {
   defaultActiveIndex: "/"
  }
 },
 created() {
  // 组件创建完后获取数据，
  // 此时 data 已经被 observed 了
  this.fetchData()
 },
 methods: {
  handleSelect(index){
   this.defaultActiveIndex = index;
  },
  jumpTo(url){
   this.defaultActiveIndex = url;
   this.$router.push(url); //用go刷新
  },
  fetchData () {
   var cur_path = this.$route.path; //获取当前路由
   var routers = this.$router.options.routes; // 获取路由对象
   var nav_type = "";
   for(var i=0; i<routers.length; i++){
    var children = routers[i].children;
    if(children){
     for(var j=0; j<children.length; j++){
      var grand_children = children[j].children;
      if(grand_children){
       for(var k=0; k<grand_children.length; k++){
        if(grand_children[k].path == cur_path){
         nav_type = routers[i].type;
         break;
        }
       }
      }
     }
    }
   }
   if(nav_type == "home"){
    this.defaultActiveIndex = "/";
   } else if(nav_type == "enterprise"){
    this.defaultActiveIndex = "/enterpriseManager";
   }
  }
 }
 watch: {
  '$route': 'fetchData'
 }
}
</script>

export default [
{
 path: '/',
 type: 'home', //自定义type区分不同模块菜单
 name: 'home',
 redirect: '/dashboard',
 component: Home,
 menuShow: true,
 children: [
  {
   path: '/dashboard',
   component: HomeNav,
   name: 'dashboard',
   leaf: true, // 只有一个节点
   iconCls: 'icon-home', // 图标样式class
   menuShow: true,
   children: [
    { path: '/dashboard', component: Dashboard, name: '首页', menuShow: true }
   ]
  },
  {
   path: '/mySet',
   component: HomeNav,
   name: '我的设置',
   iconCls: 'el-icon-menu',
   menuShow: true,
   children: [
    { path: '/mySet/plan', component: Plan, name: '行程计划', menuShow: true },
    { path: '/mySet/maillist', component: Maillist, name: '通讯录', menuShow: true }
   ]
  }
 ]
},
{
 path: '/enterpriseManager',
 type: 'enterprise',
 name: 'enterprise',
 component: Home,
 redirect: '/enterprise/list',
 menuShow: true,
 children: [
  {
   path: '/enterpriseList',
   component: EnterpriseNav,
   name: 'enterpriseList',
   leaf: true, // 只有一个节点
   iconCls: 'icon-home', // 图标样式class
   menuShow: true,
   children: [
    { path: '/enterprise/list', component: EnterpriseList, name: '企业列表', menuShow: true }
   ]
  },
  {
   path: '/enterpriseAdd',
   component: EnterpriseNav,
   name: 'enterpriseAdd',
   leaf: true, // 只有一个节点
   iconCls: 'el-icon-menu',
   menuShow: true,
   children: [
    { path: '/enterprise/add', component: EnterpriseAdd, name: '企业添加', menuShow: true }
   ]
  },
  {
   path: '/enterpriseValidate',
   component: EnterpriseNav,
   name: 'enterpriseValidate',
   leaf: true, // 只有一个节点
   iconCls: 'el-icon-menu',
   menuShow: true,
   children: [
    { path: '/enterprise/validate', component: EnterpriseValidate, name: '企业认证', menuShow: true }
   ]
  }
 ]
}
]

 //像这样
 changeSef: function () {
  //手动刷新视图
  var that = this;
  that.$forceUpdate();
 },

//错误示范
setTimeout(bidOrderInit, 200);
//上面那样是不行的,网上查了下, 大致是说在setTimeout中this指向window对象, 
//于是乎被定时的方法中就使用不到vue的this对象了
//正确示范
//可以无视对ie的支持时
setTimeout(()=> {
 this.bidOrderInit();
}, 200);
//需要兼容ie时
setTimeout(function () {
 this.bidOrderInit();
}, 200);