Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to achieve dynamic bread crumbs in vue.js". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Requirements description:

Click the navigation on the left, jump to different pages, and dynamically generate breadcrumbs according to the navigation path. The data of bread crumbs come from the navigation on the left.

Train of thought:

1. Breadcrumbs are introduced into the page as a separate component. The structure of the page is as follows:

two。 Implementation of the breadcrumb component:

{{item.title}} / export default {name:'bread-crumb', computed: {breadCrumbList () {/ / store the data of bread crumbs in vuex state return this.$store.state.breadCrumbList},}

3. Each time the route is updated, update the breadcrumb data:

/ / main.jsrouter.beforeEach ((to, from, next) = > {/ / the navigation guard store.commit ('setCurrRouteNme', {currRouteNme:to.name}); store.dispatch (' setMenuList'). Then () = > {/ / because the breadcrumb data comes from the left menu, this side first gets the left navigation data and then generates the breadcrumb 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: {/ / because the data is obtained by an asynchronous request, changing the state through dispatch,commit can only handle synchronous data setMenuList ({commit}) {let menuList Return new Promise ((resolve) = > {axios (url) .then (res = > {/ / url is the interface for requesting menu data menuList = res.data.authList.map (({id,symbol,pId,forward,resName,isLeaf})) = > {return {id,symbol,pId,forward, label:resName IsLeaf:isLeaf, icon:isLeaf = = 1 please describe the relationship between the two parties Commit ('setOriMenuList', {oriMenuList: menuList}); / / this is the data processing for the left menu, but ignore let menuTree = menuList.reduce (function (prev, item) {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 item0; I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.