Vue页面手动刷新，导航栏激活项还原到初始状态问题解决方案

Posted 2020-11-01 Lena_叶

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