场景描述：在页面中存在顶部导航和左侧导航，左侧导航和右侧内容区使用了命名视图实现，点击左侧导航的链接时，右侧内容区相应显示不同组件内容。问题：在当前链接手动刷新浏览器（例如：浏览器地址为/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 }]}]}]
