vue.js - 一个关于 vue-router 中修改 vuex 内容的问题

问题描述

问 题

洒家想在 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这个全局状态。
效果是这样的：

点击另一个：

但是呢，如果反复点击已经访问过的路由的时候就会出问题，
会出现这样：

每次重复点击之前已经点击过的路由链接就会增加一个：

很惆怅。。。

解决方案

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

官方说明

这篇关于vue.js - 一个关于 vue-router 中修改 vuex 内容的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！