vue动态面包屑导航,
这篇文章主要为大家详细介绍了vue。j实现动态面包屑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近在学习vue，正好手上有个项目还是用框架写的，就自己尝试将这个项目的前端用某视频剪辑软件实现，途中遇到了动态面包屑的问题，特此记录一下，如有不对的地方，欢迎指正。
需求描述：
点击左侧的导航，跳转到不同的页面，并且根据导航的路径，动态生成面包屑。面包屑的数据均来自于左侧的导航。
思路：
1.面包屑作为一个单独的组件，在页面中引入。页面的结构如下：
模板
div class=page-center
顶栏/顶栏！-页面顶部信息，固定在顶部-
div class= webui-menu-vertical left-nav v-bind:style= { width:colspan？100像素: 220像素 }
菜单-垂直
:menu-list=menuList
@flexMenuClick=flexMenuClick
@菜单点击=菜单点击/菜单-垂直
/div！-左侧菜单导航，点击这边的菜单，右边的面包屑变化-
div class= right-content v-bind:style= { margin left:colspan？100像素: 220像素 }
面包屑/面包屑！-面包屑组件-
div class=内容
路由器视图/路由器视图！-路由页面-
/div
/div
/div
/模板
2.面包屑组件的实现：
！-主要代码实现，样式自己DIY -
模板
面包屑
保险商实验所
面包屑列表中的li v-for= (item，index):key= item。标题
路由器链接{ {项目。title } }/路由器链接
索引面包面包列表。长度-1 //span
/李
/ul
/div
/模板
脚本
导出默认值{
名称："面包屑",
计算值：{
breadCrumbList() { //将面包屑的数据存储在状态管理状态中
归还这个100美元商店。状态。面包面包清单
}
},
}
/脚本
3.每次路由更新的时候，更新面包屑的数据：
//main.js
router.beforeEach(收件人、发件人、下一个)={ //这里用到导航守卫
store.commit(setCurrRouteNme ，{ currRouteNme:to。name })；
store.dispatch(setMenuList ).然后(()={ //因为面包屑的数据来自左侧菜单，这边先获取左侧导航数据然后根据当前路径生成面包屑
商店。分派(设置面包屑)；
});
next()；
})
//store.js
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
从" axios "导入爱可信
Vue.use(Vuex)
导出默认的新Vuex .商店({
状态：{
currRouteNme:字符串，
猎户星座：数组，
菜单列表：数组，
面包屑列表：数组，
},
突变：{
setCurrRouteNme(状态，有效负载){
状态。有效载荷。currroutenme
},
setMenuList(状态，有效负载){
状态。菜单列表=有效载荷。菜单列表
},
setOriMenuList(状态，有效负载){
状态。orimenulist=有效载荷。东方主义者
},
setBreadCrumb(状态，负载){
状态。面包屑列表=有效载荷。面包屑清单
},
},
动作：{ //因为数据是异步请求获取的，所以改变状态要通过调度，提交只能处理同步数据
setMenuList ( {commit} ) {
让选单列
返回新承诺((解决)={
axios(网址)。然后(res={ //url是请求菜单数据的接口
菜单列表=资源数据。authlist。map(({ id，symbol，pId，forward，resName，isLeaf})={
返回{
id，
符号，
pId，
向前，
标签:resName，
isLeaf:isLeaf，
icon:isLeaf==1？电子图标-商品
}
});
提交( setOriMenuList ，{
菜单主义者
});
//这边是为了左侧菜单而进行的数据处理，可忽略
let menuTree=菜单列表。减少(函数(上一项，项目){
prev[item.pId]？prev[item.pId].push(item):prev[item。PID]=[item]；
返回上一个
}, {});
for (let parentItem in menuTree) {
menuTree[parentItem].forEach(函数（项目){
项目。children=菜单树[item。id】？menuTree[item.id]:空；
});
}
提交( setMenuList ，{
menuList: menuTree[0]
});
resolve()；
})
})
},
setBreadCrumb ( {commit，state} ) {
让currMenuList=state。orimenulist
让currMenu
设面包pre=[]；
对于(设I=0；icurrMenuList.lengthi ) {
if(currMenuList[I][ symbol ]==state。currroutenme){
curr menu=currMenuList[I]；
让面包屑项目={ }；
面包屑项目。title=当前菜单列表[I].标签；
面包屑项目。路径=" "；
面包屑预。un shift(面包屑项目)；
}
}
函数setBreadCrumb(菜单){ //递归找出当前菜单的所有父亲菜单
if(menu.pId！=0){
对于(设I=0；icurrMenuList.lengthi ) {
if(currMenuList[I][ id ]==menu。PID){
让面包屑项目={ }；
面包屑项目。title=currMenuList[I][ label ]；
面包屑项目。路径=" "；
面包屑预。un shift(面包屑项目)；
setBreadCrumb(currMenuList[i])
}
}
}
}
设置面包屑(货币菜单)；
让索引={
标题：首页，
路径：""
};
面包屑预卸载(索引);
提交( setBreadCrumb ，{
面包屑列表：面包屑预
})
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。