洒家想在 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 的双向绑定
官方说明