vue.js怎么实现动态面包屑

本篇内容介绍了"vue.js怎么实现动态面包屑"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

需求描述:

点击左侧的导航,跳转到不同的页面,并且根据导航的路径,动态生成面包屑.面包屑的数据均来自于左侧的导航.

思路:

1.面包屑作为一个单独的组件,在页面中引入.页面的结构如下:

2.面包屑组件的实现:

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
"vue.js怎么实现动态面包屑"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！