动态修改面包屑导航条

whychdw

2020-04-14 f91c5ff6697095f62b7b273b0b119ec0fbddaae9

动态修改面包屑导航条

 src/App.vue

@@ -15,7 +15,7 @@
                    <div class="page-content-right">
                        <content-box
                        :title-left=true>
                            <div class="whyc-breadcrumb" slot="title">当前位置：首页 > 站点查询</div>
                            <div class="whyc-breadcrumb" slot="title">当前位置：{{$store.state.crumb}}</div>
                            <router-view></router-view>
                        </content-box>
                    </div>

 src/main.js

@@ -22,9 +22,11 @@

// 进入路由前
router.beforeEach((to, from, next) => {
    var name = to.name;
    console.log(to);
    // 修改主导航的激活状态
    store.dispatch('changeNavName', name);
    store.dispatch('changeNavName', to.name);
    // 修改面包屑导航内容
    store.dispatch('changeCrumb', to.meta.crumb);
    next();
});


 src/pages/equipment-monitor/index.vue

@@ -1,12 +1,16 @@
<template>
    <div class="equipment-monitor-index">
        动力设备监控
        <five-sides-line></five-sides-line>
    </div>
</template>

<script>
import FiveSidesLine from '@/components/FiveSidesLine'

export default {
    
    components: {
        FiveSidesLine
    }
}
</script>


 src/router/routes.js

@@ -3,7 +3,7 @@
        path: '',
        name: 'PagesHome',
        meta: {
            title: '首页 > 站点查询'
            crumb: '首页 > 站点查询'
        },
        component: (resolve)=>require(['@/pages/home/index.vue'], resolve)
    },
@@ -11,7 +11,7 @@
        path: '/equipment-monitor',
        name: 'PagesEquipmentMonitor',
        meta: {
            title: '动力设备监控'
            crumb: '动力设备监控'
        },
        component: (resolve)=>require(['@/pages/equipment-monitor/index.vue'], resolve)
    },
@@ -19,7 +19,7 @@
        path: '/moving-ring-monitor-center',
        name: 'PagesMovingRingMonitorCenter',
        meta: {
            title: '动环监控中心'
            crumb: '动环监控中心'
        },
        component: (resolve)=>require(['@/pages/moving-ring-monitor-center/index.vue'], resolve)
    },

 src/store/actions.js

@@ -2,5 +2,9 @@
    // 修改主导航激活状态
    changeNavName: function(context, name) {
        context.commit('changeNavName', name);
    },
    // 修改面包屑导航条内容
    changeCrumb: function(context, str) {
        context.commit('changeCrumb', str);
    }
}

 src/store/mutations.js

@@ -2,5 +2,9 @@
    // 修改主导航激活状态
    changeNavName: function(state, name) {
        state.navName = name;
    },
    // 修改面包屑导航条内容
    changeCrumb: function(state, str) {
        state.crumb = str;
    }
}

 src/store/state.js

@@ -1,3 +1,4 @@
export default {
    navName: 'PagesHome'
    navName: 'PagesHome',
    crumb: '首页 > 站点查询'
}