vue从列表页到详情页的面包屑处理方法---tianyawhl

对于菜单级别的面包屑采用的是     this.$route.matched

假如数据结构

[ { path: "/home", name: "商业数据统计", component: "Home", children:[{ path: "/commercial/dataAccount/Day", name: "日统计1", component: "DataAccountDay" }, { path: "/commercial/dataAccount/Month", name: "月统计1", component: "DataAccountMonth" }] }, { path: "/home", name: "商业报表中心", component: "Home", children:[{ path: "/commercial/baobiao/Day", name: "日报表1", component: "BaobiaoDay" }] } ]

DataAccountDay组件里面是一个列表，点击列表进入detail.vue页面

如果想实现下面的效果（点击表格的每条记录，名字显示在面包屑的后面），该怎么做呢

原来面包屑的组件 breadcrumb.vue

<template> <div class="margin_b20"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item v-for="(item,index) in breadList" :key="index"> {{item.name}} </el-breadcrumb-item> </el-breadcrumb> </div> </template> <script> export default { name:"Breadcrumb", data(){ return{ breadList:[] } }, created(){ this.getBreadList() }, watch:{ $route(){ this.getBreadList() } }, methods:{ getBreadList(){ let matched = this.$route.matched; this.breadList = matched console.log(this.breadList) } } }; </script> <style> </style>

如果修改其他的组件面包屑同步改变，需要把面包屑的数据放到vuex,方便数据共享

breadcrumb.vue修改为

<template> <div class="margin_b20"> <el-breadcrumb-item v-for="(item,key) in breadlist" :key="key">{{item.name}}</el-breadcrumb-item> </el-breadcrumb> </div> </template> <script> export default { name: "Breadcrumb", data() { return { //breadlist: [] }; }, computed:{ breadlist(){ return this.$store.state.breadlist } }, watch:{ $route(){ this.getBreadcrumb() } }, created() { console.log("getBreadcrumb") this.getBreadcrumb() }, methods: { getBreadcrumb(){ let matched = this.$route.matched // matched 里面的很多数据我们并不需要，放进去如果后面增加的数据键值对不一致会导致错误 matched = matched.map((item)=>{ return {name:item.name} }) console.log(matched) this.$store.commit("saveBreadList",matched) } } }; </script> <style scoped> ul { list-style-type: none; padding: 0; } .main-footer { border-top: 1px solid #ccc; background: #f8fafd; padding: 10px; margin-left: 0; } .main-footer img { vertical-align: middle; width: 65px; margin-right: 10px; } </style>

DataAccountDay.vue的按钮

<el-button  @ click = " goDetail ( scope . row ) " > 详情 </el-button>

goDetail(row){ this.$router.push({path:`/industry/dataAccount/Day/${row.id}`}) let obj={[row.id]:row.name} console.log(obj) this.$store.commit("saveMapTitle",obj) },

从列表点击进入详情页路由配置

{ path: '/home', name: "工业数据统计", component:Home, children:[{ path:"/industry/dataAccount/Day/:userId",//userId不能与其他的动态路由重名 否则会报错 name:"日统计", component:() => import("../views/dataAccount/detail.vue") }] }

detail.vue

<template> <div>this is detail {{$route.params.userId}}</div> </template> <script> export default { data() { return { table1: { tableData: [] } }; }, created() { }, computed: { } }, watch: { }, mounted() { console.log("mounted"); // 一定要使用 this.$nextTick 否则获取不到userID this.$nextTick(() => { let userID = this.$route.params.userId; let name = this.$store.state.mapTitle[userID] this.$store.commit("addBreadList", { name: name }); }); }, }; </script>

store.js

state: { mapTitle:JSON.parse(sessionStorage.getItem("mapTitle")) || {}, breadlist:[], }, mutations: { saveMapTitle(state,mapTitle){ state.mapTitle = mapTitle sessionStorage.setItem("mapTitle",JSON.stringify(mapTitle)) }, addBreadList(state,newbreadlist){ state.breadlist.push(newbreadlist) }, saveBreadList(state,breadlist){ state.breadlist = breadlist } }

流程

1、点击列表页保存通过this.$route.matched获取的面包屑，同时把点击的id和名字组成一个对象存入vuex中

2、进入详情页通过 this.$route.params.userId 获取name值，并增加到vuex的面包屑对象中，这时面包屑就更新了

---来自腾讯云社区的---tianyawhl