本篇内容介绍了“vue.js怎么实现动态面包屑”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
需求描述:
点击左侧的导航,跳转到不同的页面,并且根据导航的路径,动态生成面包屑.面包屑的数据均来自于左侧的导航.
思路:
面包屑作为一个单独的组件,在页面中引入.页面的结构如下:
<template> <div class="page-center"> <top-bar></top-bar> <!--页面顶部信息,固定在顶部--> <div class="webui-menu-vertical left-nav" v-bind:> <menu-vertical :menu-list="menuList" @flexMenuClick="flexMenuClick" @menuClick="menuClick"></menu-vertical> </div> <!--左侧菜单导航,点击这边的菜单,右边的面包屑变化--> <div class="right-content" v-bind:> <bread-crumb></bread-crumb> <!--面包屑组件--> <div class="content"> <router-view></router-view> <!--路由页面--> </div> </div> </div></template>2.面包屑组件的实现:
<!--主要代码实现,样式自己DIY--><template> <div class="bread-crumb"> <ul> <li v-for=" (item, index) in breadCrumbList" :key="item.title"> <router-link>{{item.title}}</router-link> <span v-if="index < breadCrumbList.length-1">/</span> </li> </ul> </div></template> <script> export default { name:'bread-crumb', computed: { breadCrumbList() { //将面包屑的数据存储在vuex状态中 return this.$store.state.breadCrumbList } },}</script>3.每次路由更新的时候,更新面包屑的数据:
//main.jsrouter.beforeEach( (to, from, next) => { //这里用到导航守卫 store.commit('setCurrRouteNme', {currRouteNme:to.name}); store.dispatch('setMenuList').then( ()=> { //因为面包屑的数据来自左侧菜单,这边先获取左侧导航数据然后根据当前路径生成面包屑 store.dispatch('setBreadCrumb'); }); next();}) //store.jsimport Vue from 'vue'import Vuex from 'vuex'import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ state: { currRouteNme: String, oriMenuList:Array, menuList:Array, breadCrumbList:Array, }, mutations: { setCurrRouteNme( state, payload ) { state.currRouteNme = payload.currRouteNme }, setMenuList( state, payload) { state.menuList = payload.menuList }, setOriMenuList( state, payload) { state.oriMenuList = payload.oriMenuList }, setBreadCrumb( state, payload) { state.breadCrumbList = payload.breadCrumbList }, }, actions: { //因为数据是异步请求获取的,所以改变state要通过dispatch,commit只能处理同步数据 setMenuList ( {commit} ) { let menuList; return new Promise ( (resolve) => { axios(url).then( res => { //url是请求菜单数据的接口 menuList = res.data.authList.map(({id,symbol,pId,forward,resName,isLeaf})=>{ return { id, symbol, pId, forward, label:resName, isLeaf:isLeaf, icon:isLeaf == 1?'':'el-icon-goods' } }); commit('setOriMenuList', { oriMenuList: menuList }); //这边是为了左侧菜单而进行的数据处理,可忽略 let menuTree = menuList.reduce(function (prev, item) { prev[item.pId] ? prev[item.pId].push(item) : prev[item.pId] = [item]; return prev; }, {}); for (let parentItem in menuTree) { menuTree[parentItem].forEach(function (item) { item.children = menuTree[item.id] ? menuTree[item.id] : null; }); } commit('setMenuList', { menuList: menuTree[0] }); resolve(); }) }) }, setBreadCrumb ( {commit, state} ) { let currMenuList = state.oriMenuList; let currMenu; let breadCrumbPre = []; for (let i=0; i<currMenuList.length; i++) { if(currMenuList[i]['symbol'] == state.currRouteNme){ currMenu = currMenuList[i]; let breadCrumbItem = {}; breadCrumbItem.title = currMenuList[i].label; breadCrumbItem.path = ''; breadCrumbPre.unshift(breadCrumbItem); } } function setBreadCrumb(menu){ //递归找出当前菜单的所有父亲菜单 if(menu.pId != 0){ for (let i=0; i<currMenuList.length; i++) { if(currMenuList[i]['id'] == menu.pId){ let breadCrumbItem = {}; breadCrumbItem.title = currMenuList[i]['label']; breadCrumbItem.path = ''; breadCrumbPre.unshift(breadCrumbItem); setBreadCrumb(currMenuList[i]) } } } } setBreadCrumb(currMenu); let index = { title:'首页', path:'' }; breadCrumbPre.unshift(index); commit('setBreadCrumb', { breadCrumbList:breadCrumbPre }) } }})“vue.js怎么实现动态面包屑”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
