場景描述：在頁面中存在頂部導航和左側導航，左側導航和右側內容區使用了命名視圖實現，點擊左側導航的鏈接時，右側內容區相應顯示不同組件內容。問題：在當前鏈接手動刷新瀏覽器（例如：瀏覽器地址為/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頁面手動刷新，導航欄激活項還原到初始狀態問題解決方案