Vue page is manually refreshed, and the navigation bar activation item is restored to the initial state problem solution

Scenario description: There are top navigation and left navigation on the page. The left navigation and right content area are implemented using named views. When you click the link of the left navigation, the content of different components will be displayed in the right content area accordingly. Problem: Manually refresh the browser at the current link (for example: the browser address is /enterprise/list), the top navigation activation item is restored to the initial state (the default is the "workbench" item).

Principle: Every refresh will re-instantiate Vue, that is, the created method will be called.

<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</Order Management
　　　　<el-menu-item index="/systemManager">系统管理</el-menu-item>
　　</el-menu>
</template>
<script>
export default {
    name: 'app',
    data () {
        return {
            defaultActiveIndex: "/"
        }
    },
    created() {
        // Get the data after the component is created, 
        // At this time the data has been 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; // Get the current route 
            var routers =  this .$router.options.routes; // Get the routing object 
            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>

Attach the router configuration format:

export default [
{
    path: '/',
    type: 'home',   // Custom type distinguishes different module menus 
    name: 'home' ,
    redirect: '/dashboard',
    component: Home,
    menuShow: true,
    children: [
        {
            path: '/dashboard',
            component: HomeNav,
            name: 'dashboard',
            leaf: true , // only one node 
           iconCls: 'icon-home', // icon style class 
           menuShow: true ,
           children: [
               { path: '/dashboard', component: Dashboard, name: '首页', menuShow: true }
           ]
        },
        {
           path: '/mySet',
           component: HomeNav,
           name: 'My settings' ,
           iconCls: 'el-icon-menu',
           menuShow: true,
           children: [
               { path: '/mySet/plan', component: Plan, name: 'trip plan', menuShow: true },
               { path: '/mySet/maillist', component: Maillist, name: 'address book', menuShow: true }
           ]
       }
    ]
},
{
    path: '/enterpriseManager',
    type: 'enterprise',
    name: 'enterprise',
    component: Home,
    redirect: '/enterprise/list',
    menuShow: true,
    children: [
        {
           path: '/enterpriseList',
           component: EnterpriseNav,
           name: 'enterpriseList',
           leaf: true , // only one node 
           iconCls: 'icon-home', // icon style class 
           menuShow: true ,
           children: [
               { path: '/enterprise/list', component: EnterpriseList, name: '企业列表', menuShow: true }
           ]
        },
        {
            path: '/enterpriseAdd',
            component: EnterpriseNav,
            name: 'enterpriseAdd',
            leaf: true , // only one node 
            iconCls: 'el-icon-menu' ,
            menuShow: true,
            children: [
               { path: '/enterprise/add', component: EnterpriseAdd, name: 'Enterprise Add', menuShow: true }
            ]
        },
        {
            path: '/enterpriseValidate',
            component: EnterpriseNav,
            name: 'enterpriseValidate',
            leaf: true , // only one node 
            iconCls: 'el-icon-menu' ,
            menuShow: true,
            children: [
               { path: '/enterprise/validate', component: EnterpriseValidate, name: '企业认证', menuShow: true }
            ]
        }
    ]
}
]