效果图
1、配置 vuex
npm install vuex --save
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
bread: []
},
mutations: {
},
actions: {
}
})
2、App中监听 $route
watch: {
$route: {
handler(val){
this.$store.state.bread = val.matched;
}
},
immediate: true
}
$route打印结果
matched中的 name 为路由配置中的 name 值
matched中的 path 为路由配置中的 path 值
{
path: '/home',
name: '首页',
component: ()=>import('../views/home')
}
3、组件中代码
<template>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="(i,k) in $store.state.bread" :key="k" :to="{ path: i.path }">{{i.name}}</el-breadcrumb-item>
</el-breadcrumb>
</template>