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

Posted Lena_叶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘, // 图标样式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页面手动刷新,导航栏激活项还原到初始状态问题解决方案的主要内容,如果未能解决你的问题,请参考以下文章

elementUI的导航栏在刷新页面的时候选中状态消失的解决

初识Vue之Vue默认首页router激活一直存在

vue 导航栏刷新页面定位:

前端权限控制-基于vue-router的动态路由实现

vue 导航栏状态即时更新

vue 强制刷新子组件