【Vue】一个关于 vue-router 中修改 vuex 内容的问题

洒家想在 router" title="vue-router">vue-router 的 beforeEach 全局钩子中通过获取路有对象 meta 中的内容，然后设置 vuex 中对应的信息从而达成 面包屑导航的效果。

import Vue from 'vue'
import Router from 'vue-router'
import store from '../vuex/store'
Vue.use(Router)
const routes = [
{ path: '/', name: 'home', component: require('../components/pages/Default.vue') },
{ path: '/EmployeeMGT', name: 'EmployeeMGT', component: require('../components/pages/EmployeeMGT.vue'), meta: { breadcrumbList: [ { label: '员工详情' }] } },
{ path: '/DepartmentDetail', name: 'DepartmentDetail', component: require('../components/pages/DepartmentDetail.vue'), meta: { breadcrumbList: [ { label: '部门详情' }] } },
{ path: '/SuggestionType', name: 'SuggestionType', component: require('../components/pages/SuggestionType.vue'), meta: { breadcrumbList: [ { label: '建议类型' }] } },
{ path: '/SuggestProcess', name: 'SuggestProcess', component: require('../components/pages/SuggestProcess.vue'), meta: { breadcrumbList: [ { label: '建议流程' }] } },
{ path: '/SuggestionMGT', name: 'SuggestionMGT', component: require('../components/pages/SuggestionMGT.vue'), meta: { breadcrumbList: [ { label: '建议管理' }] } },
{ path: '/CoMGT', name: 'CoMGT', component: require('../components/pages/CoMGT.vue'), meta: { breadcrumbList: [ { label: '公司管理' }] } },
]
let router = new Router({
routes
})
// 全局 before 钩子: 进入下一个路由前， 修改 Vuex 中的 breadcrumb 内容
router.beforeEach(({ meta }, from, next) => {
let { breadcrumbList = [] } = meta
breadcrumbList.unshift( { label: '主页' } )
store.dispatch('breadcrumbUpdate', breadcrumbList)
next()
})
export default router

上面的 beforeEach 中从 meta 中获取 breadcrumbList 并补充 最前面的 主页, 然后触发 breadcrumbUpdate这个 action

actions:

export const breadcrumbUpdate = ({commit}, newCrumb) => {
commit(BREADCRUMB_UPDATE, newCrumb)
}

mutations:

[BREADCRUMB_UPDATE](state, newCrumb) {
state.breadcrumbList = newCrumb
}

简单的修改breadcreumbList这个全局状态。
效果是这样的：
【Vue】一个关于 vue-router 中修改 vuex 内容的问题

点击另一个：
【Vue】一个关于 vue-router 中修改 vuex 内容的问题

但是呢，如果反复点击已经访问过的路由的时候就会出问题，
会出现这样：
【Vue】一个关于 vue-router 中修改 vuex 内容的问题

每次重复点击之前已经点击过的路由链接就会增加一个：
【Vue】一个关于 vue-router 中修改 vuex 内容的问题

很惆怅。。。

回答

用 concat 代替 unshift，unshift 会触发 vue 的双向绑定

官方说明

其实每个路由，都是一个完整的面包屑，所以只读取就行，不用操作，当然这是写死页面名称的情况下：

路由：

{
        path: '/',
        name: 'index',
        component: Index,
        meta: {
            keepAlive: false,
            breadcrumbList: [
                {
                    name: '项目管理'
                }
            ]
        }
    },
{
    path: '/editProject/:productId&:projectId&:type',
    name: 'editProject',
    component: EditProject,
    meta: {
        keepAlive: false,
        breadcrumbList: [
            {
                name: '项目管理',
                link: '#'
            },
            {
                name: '项目编辑'
            }
        ]
    }
}

面包屑组件里面直接拿 $route.meta.breadcrumbList 就行了

以上是 【Vue】一个关于 vue-router 中修改 vuex 内容的问题 的全部内容， 来源链接： utcz.com/a/76767.html

回到顶部