vue面包屑（vue动态路由多级嵌套面包屑怎么弄）

最新推荐文章于 2024-10-10 11:11:44 发布

weixin_34413357

最新推荐文章于 2024-10-10 11:11:44 发布

阅读量4.4k

点赞数

文章标签： javascript json ViewUI

原文链接：https://segmentfault.com/a/1190000010574901

版权

本文介绍了如何在Vue应用中处理动态路由的多级嵌套面包屑导航问题。通过利用this.$route.matched方法获取路径和名称，实现面包屑组件的动态渲染。在A列表页面和B详情页面之间跳转时，记录面包屑层级并更新状态管理中的面包屑路径。在breadcrumb.vue组件中遍历这些路径，以<router-link>的形式展示面包屑导航。

摘要由CSDN通过智能技术生成

vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合，动态的嵌套获取不到全部具体的id)

功能比如：A列表页面路由如/a，点击任意一列进入任意一个A的详情页面名字为B,/b/03（这个是动态路由弄是吧,03就是id嘛），点击B页面任意一列，再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的，如（/a；/b/03；/bdetail/01）

思路：获取所有进入的层级的路由和名称如breadlist=[{path:'/a',name:'一级'},{path:'/b/03',name:'二级'},{path:'/bdetail/01',name:'三级'}]，然后遍历出来如：<span v-for="(item in breadlist)"><router-link :to="item.path">{ {item.name}}</router-link></span>

做法：下面贴出相关代码：

A列表页面跳转按钮：（breadNum记录面包屑层级）

<router-link :to="{path:'/b/'+id,query:{breadNum:2}}"></router-link>

B列表页面跳转按钮：

<router-link :to="{path:'/bbdetail/'+id,query:{breadNum:3}}"></router-link>

breadcrumb.vue页面：

<template>
        <div class="breadbox">
            <span v-for="(item,index) in breadlist" >
                <router-link :to="item.path">{
   {item.name}}</router-link>
            </span>
        </div>
</template>
<script>
    export default{
        created() {
          this.getBreadcrumb();
        },
        data() {
            return {
                breadlist: '' // 路由集合
            }
        },
        methods: {
            getBreadcrumb() {
                var breadNumber= this.$route.query.breadNum || 1;//url变量breadNum记录层级，默认为1，如果大于1，要添加上变量；
                var breadLength=this.$store.state.breadListState.length;//目前breadlist集合数组个数
                var curName=this.$route.nam