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', // 圖標樣式classmenuShow: 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', // 圖標樣式classmenuShow: 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 }]}]
}
]

?