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

场景描述：在页面中存在顶部导航和左侧导航，左侧导航和右侧内容区使用了命名视图实现，点击左侧导航的链接时，右侧内容区相应显示不同组件内容。问题：在当前链接手动刷新浏览器（例如：浏览器地址为/enterprise/list），顶部导航激活项还原到初始状态（这里默认是“工作台”项）。

原理：每次刷新都会重新实例化Vue，也就是会调用created方法。

<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>

附上router配置格式：

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 }
  ]
 }
]
}
]

补充知识：vue手动刷新视图以及其他小问题

最近把手头上一个使用angularJS+jquery各种七七八八组件写的页面拿vue+elementUI重写了一边, 真是极度丝滑, 记录一些vue和elementUI的小问题

1.如果vue中的数据结构比较庞大的话, 十分有可能会出现model更新而视图不更新/model和视图都不更新也不报错的情况, 此时需要手动刷新vue的数据, 在change或click事件中, 使用this.$forceUpdate()手动刷新视图

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

2.在vue中使用setTimeout

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

来源：https://www.cnblogs.com/yeqrblog/p/8961707.html