使用状态管理修改主导航激活的逻辑

whychdw

2020-04-14 0c7a9e1e978c51982698ea6d7c41bcce67f04cca

使用状态管理修改主导航激活的逻辑

 src/App.vue

@@ -16,8 +16,7 @@
                        <content-box
                        :title-left=true>
                            <div class="whyc-breadcrumb" slot="title">当前位置：首页 > 站点查询</div>
                            <five-sides-line></five-sides-line>
                            <right-triangle></right-triangle>
                            <router-view></router-view>
                        </content-box>
                    </div>
                </div>
@@ -31,8 +30,6 @@
import PageNav from './components/PageNav'
import ContentBox from './components/ContentBox'
import MyTree from './components/tree/Index'
import FiveSidesLine from './components/FiveSidesLine'
import RightTriangle from './components/RightTriangle'

export default {
    name: 'App',
@@ -41,8 +38,6 @@
        PageNav,
        ContentBox,
        MyTree,
        FiveSidesLine,
        RightTriangle
    },
    methods: {
        treeClick: function(res) {

 src/components/PageNav.vue

@@ -4,9 +4,9 @@
            <ul>
                <li 
                v-for="(nav, key) in navs" :key="key"
                :class="{'active-nav': nav.active}"
                :class="{'active-nav': checkName(nav.name)}"
                @click="navClick(nav)">
                    <a href="javascript:;">{{nav.txt}}</a>
                    <router-link :to="nav.router">{{nav.txt}}</router-link>
                </li>
            </ul>
        </div>
@@ -20,35 +20,37 @@
            navs: [
                {
                    txt: '首页',
                    active: false
                    name: 'PagesHome',
                    router: '/'
                },
                {
                    txt: '动环监控中心',
                    active: false
                    router: ''
                },
                {
                    txt: '动力设备监控',
                    active: true
                    name: 'PagesEquipmentMonitor',
                    router: '/equipment-monitor'
                },
                {
                    txt: '环境设备监控',
                    active: false
                    router: ''
                },
                {
                    txt: '安防设备监控',
                    active: false
                    router: ''
                },
                {
                    txt: '报警管理',
                    active: false
                    router: ''
                },
                {
                    txt: '统计分析',
                    active: false
                    router: ''
                },
                {
                    txt: '系统管理',
                    active: false
                    router: '',
                }
            ],
        }
@@ -72,7 +74,14 @@
                    this.navs[i].active = true;
                }
            }

        },
        checkName: function(name) {
            if(name) {
                var navName = this.$store.state.navName;
                return navName.indexOf(name) == -1?false:true;
            }
            return false;
            
        }
    }
}

 src/main.js

@@ -20,6 +20,14 @@
    htmlDom.style.fontSize = `${htmlWidth / 7.5}px`;
};

// 进入路由前
router.beforeEach((to, from, next) => {
    var name = to.name;
    // 修改主导航的激活状态
    store.dispatch('changeNavName', name);
    next();
});

window.onresize = setHtmlFontSize;

setHtmlFontSize();

 src/pages/equipment-monitor/index.vue

New file
@@ -0,0 +1,17 @@
<template>
    <div class="equipment-monitor-index">
        动力设备监控
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>



 src/pages/home/index.vue

New file
@@ -0,0 +1,17 @@
<template>
    <div class="pages-index">
        {{msg}}
    </div>
</template>

<script>
export default {
    name: 'PagesIndex',
    data() {
        return {
            msg: '首页内容'
        }
    }
}
</script>


 src/router/routes.js

@@ -1 +1,18 @@
export default []
export default [
    {
        path: '',
        name: 'PagesHome',
        meta: {
            title: '首页 > 站点查询'
        },
        component: (resolve)=>require(['@/pages/home/index.vue'], resolve)
    },
    {
        path: '/equipment-monitor',
        name: 'PagesEquipmentMonitor',
        meta: {
            title: '动力设备监控'
        },
        component: (resolve)=>require(['@/pages/equipment-monitor/index.vue'], resolve)
    },
]

 src/store/actions.js

@@ -1,3 +1,6 @@
export default {
    
    // 修改主导航激活状态
    changeNavName: function(context, name) {
        context.commit('changeNavName', name);
    }
}

 src/store/mutations.js

@@ -1,3 +1,6 @@
export default {
    
    // 修改主导航激活状态
    changeNavName: function(state, name) {
        state.navName = name;
    }
}

 src/store/state.js

@@ -1,3 +1,3 @@
export default {
    
    navName: 'PagesHome'
}