app制作网站有哪些/宁波关键词优化企业网站建设

面包屑有两种：一种是不带动态参数，一种是需要携带动态参数跳转的
一，不带动态参数：
1，通过路由元meta实现，在每个需要面包屑的页面路由中固定写好
如：
router.js

const router = new Router({routes: [{path: '/test',name: 'test',component: test,meta: {breadList: [{name: "首页",path: "/home"}, {name: "系统设置",path: "/setting"}, {name: "用户管理",path: "/setting/usermanage"}]}}]
});
export default router;

然后我们直接在面包屑组件中使用计算属性获取数据。

<template>//...省略
</template>
<script>
export default {name: "breadcrumb",computed: {breadList() {return this.$route.meta.breadList || [];}}
};
</script>

2.利用路由对象 matched 属性实现
matched：返回一个数组，包含当前路由的所有嵌套路径片段的路由记录 。
路由配置:

const router = new Router({routes: [{path: '/',redirect: '/home'},{path: '/home',name: 'home',component: Home,meta: { title: '首页' }},{path: '/system',name: "system",component: () => import('./views/system/system.vue'),redirect: '/system/user',meta: { title: '系统管理' },children: [{path: 'user',component: () => import('./views/system/UserMange.vue'),name: 'usermanage',meta: { title: '用户管理' }}, {path: 'message',component: () => import('./views/system/MesMange.vue'),name: 'mesmanage',meta: { title: '短信管理' }}]}]
});
export default router;

面包屑组件：

//Breadcrumb.vue
<script>
export default {data() {return {breadList: [] // 路由集合};},watch: {$route() {this.getBreadcrumb();}},methods: {isHome(route) {return route.name === "home";},getBreadcrumb() {let matched = this.$route.matched;//如果不是首页if (matched[0].name!=='home') {matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);}this.breadList = matched;}},created() {this.getBreadcrumb();}
};
</script>

二，携带动态参数
1，需要携带动态参数，那么就必须在路由变化时记录fullPath，
2，并要保证刷新时数据依然存在就要做缓存，这里缓存到sessionStorage
router.js

//a>b>c  都有动态id
//breadNumber 面包屑层级
{path: '/',name: '首页',component: Main,redirect:'/home',children:[{path: '/a',name: 'A页面',component: APage},{path: '/b/:id',name: 'B页面',component: BPage,meta:{breadNumber:2}},{path: '/bdetail/:id',name: 'C页面',component: CPage,meta:{breadNumber:3}},]
}    

store.js

mutations: {breadListMutations(getters,list){getters.breadListState=list;sessionStorage.setItem('breadListStorage',list);}
},getters:{breadListState(){return JSON.parse(sessionStorage.getItem('breadListStorage')) || [];}}

Breadcrumb

<template>//样式自己写，我用了elementUI<div class="m-artHeader"><el-breadcrumb class="linkWay"><el-breadcrumb-item v-for="(item,index) in breadList" :key="item.id"  separator="/" :to="{ path: item.path }">{{item.name}}</el-breadcrumb-item></el-breadcrumb></div>
</template>
<script>
export default{created() {this.getBreadcrumb();},data() {return {breadList: [] // 路由集合}},methods: {getBreadcrumb() {var breadNumber= typeof(this.$route.meta.breadNumber)!="undefined"?this.$route.meta.breadNumber:1;//默认为1var newBread={name:this.$route.name,path:this.$route.fullPath};//当前页面的var breadList=this.$store.getters.breadListState;//获取breadList数组breadList.splice(breadNumber,breadList.length-breadNumber,newBread);var breadList=JSON.stringify(breadList);this.$store.commit('breadListMutations',breadList);this.breadList=this.$store.getters.breadListState;}},watch: {//"$route": "getBreadcrumb"$route () {this.getBreadcrumb();}},}
</script>

可以参考vue面包屑（vue动态路由多级嵌套面包屑怎么弄）里面讲解比较详细,本文的动态参数面包屑参考此文

转载于：https://blog.csdn.net/jokren/article/details/106456147