利用获取路由参数实现动态的更新面包屑
1、下载vuex
npm i vuex -S
2、在vue项目的src下建立包store,并创建index.js
index,js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
currentPathName:''
},
mutations:{
setPath(state){
state.currentPathName = localStorage.getItem("currentPathName")
}
}
})
export default store
3、在main.js中引入store
4、在router包下的index.js下添加路由守卫
//路由守卫
router.beforeEach((to, from , next ) =>{
localStorage.setItem("currentPathName",to.name) //设置当前路由名称
index.commit("setPath") //触发store的数据更新
next() //放行路由
})
注意要引入store
5、在面包屑导航组件获取需要监听的数据
即使用面包屑的地方使用computed和watch(可以不用)
computed:{
currentPathName(){
return this.$store.state.currentPathName; //需要监听的数据
}
},
watch:{ //监听路由变化
currentPathName(newVal,oldVal){
console(newVal)
}
},面包屑部分，使用currentPathName拿到值
<!-- 页签-->
<el-breadcrumb separator="/" class="ml-10" style="display:inline-block">
<el-breadcrumb-item :to="'/'" >首页</el-breadcrumb-item>
<el-breadcrumb-item >{{currentPathName}}</el-breadcrumb-item>
</el-breadcrumb>router包下的index.js参考，为了简便直接使用name做页签
const routes = [
{
path: '/',
component: () => import( '../views/Manage.vue'),
redirect:"/home",
children:[
{
path:"home",name:"首页",component: () => import('../views/Home.vue'),
},
{
path:"user",name:"用户管理",component: () => import('../views/User.vue'),
},
]
},
