• 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 }
                ]
            }
        ]
    }
    ]
  • 相关阅读:
    解释基于注解的切面实现?
    @Controller 注解?
    Spring由哪些模块组成?
    解释AOP模块 ?
    什么是Spring的依赖注入?
    自动装配有哪些局限性 ?
    在Spring框架中如何更有效地使用JDBC?
    @Autowired 注解?
    @Required 注解?
    解释AOP?
  • 原文地址:https://www.cnblogs.com/yeqrblog/p/8961707.html
Copyright © 2020-2023  润新知