• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

基于vue-router的matched实现面包屑功能

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文主要介绍了基于vue-router的matched实现面包屑功能,分享给大家,具体如下:

如上图所示,就是常见的面包屑效果,面包屑的内容一般来说,具有一定的层级关系,就以上图为例,首先是进入首页,然后点击左侧导航,进入活动管理下的活动列表页面,然后点击某一条数据,进入活动详情页面

这正好与vue-router的mached属性所获取的结果有着相似的原理,所以可以基于此来实现面包屑效果!

这里我使用了elementui的面包屑组件和导航菜单组件,先贴出最后的效果图:

路由配置

项目结构:

侧边导航栏是首页、电子数码、服装鞋帽页面都会显示的,所以我创建了一个layout组件,将这三个路由的component都指向该组件,并将导航栏和面包屑都写在layout组件中

因为该功能的实现依赖于路由的层级嵌套关系,所以要提前构思好路由的配置,我这里的路由配置如下:

const routes = [
 //匹配空路由,重定向到根路由
    {
        path:'',
        redirect: '/home',
        meta:{
            showInbreadcrumb:false
        }
    },
    //根路由
    {
        path:'/home',
        component: ()=>import('@/views/layout/index.vue'),
        name:'home',
        meta:{
            title:"首页",
            showInbreadcrumb:true
        }
    },
    //电子数码
    {
        path:'/electronics',
        name:'电子数码',
        component: ()=>import('@/views/layout/index.vue'),
        redirect: '/electronics/computer',
        meta:{
            title:"电子数码",
            showInbreadcrumb:true
        },
        children:[
            {
                path:'computer',
                name:'computer',
                component()=>import('@/views/electronics/children/computer/index.vue'),
                meta:{
                    title:"电脑",
                    showInbreadcrumb:true
                }
            },
            {
                path:'phone',
                name:'手机',
                component: ()=>import('@/views/electronics/children/phone/index.vue'),
                meta:{
                    title:"手机",
                    showInbreadcrumb:true
                }
            },
            {
                path:'tv',
                name:'电视',
                component: ()=>import('@/views/electronics/children/tv/index.vue'),
                meta:{
                    title:"电视",
                    showInbreadcrumb:true
                }
            }
        ]
    },
    //服装鞋帽
    {
        path:'/clothing',
        name:'服装鞋帽',
        component: ()=>import('@/views/layout/index.vue'),
        redirect: '/clothing/tops',
        meta:{
            title:"服装鞋帽",
            showInbreadcrumb:true
        },
        children:[
            {
                path:'tops',
                name:'上装',
                component:  ()=>import('@/views/clothing/children/tops/index.vue'),
                meta:{
                    title:"上装",
                    showInbreadcrumb:true
                }
            },
            {
                path:'lower',
                name:'下装',
                component:  ()=>import('@/views/clothing/children/lower/index.vue'),
                meta:{
                    title:"下装",
                    showInbreadcrumb:true
                }
            },
            {
                path:'shoes',
                name:'鞋子',
                component:  ()=>import('@/views/clothing/children/shoes/index.vue'),
                meta:{
                    title:"鞋子",
                    showInbreadcrumb:true
                }
            }
        ]
    },
    //放在最后,当前面所有路由都没匹配到时,会匹配该路由,并重定向到根路由
    {
        path:'*',
        redirect:'/',
        meta:{
            showInbreadcrumb:false
        } 
    },   
]

这里我配置的路由有首页、电子数码、服装鞋帽,这三个是一级路由,其中电子数码和服装鞋帽还有二级路由,在meta中我自定义了数据,showInbreadcrumb用于判断是否显示在面包屑中,title为在面包屑显示的名称

获取路由信息

模板部分:

///src/views/layout/index.vue
<template>
    <div class="layout">
        <!-- 侧边导航栏 -->
        <div class="sideMenu">
            <el-menu
                default-active="0"
                class="el-menu-vertical-demo"
                >
                    <div v-for="(item,index) in routes" :key="index" :index="index+''">
                        <!-- 没有二级菜单的 -->
                        <el-menu-item :index="index+''" v-if="!item.children">
                            <router-link :to="{name:item.name}">{{item.meta.title}}</router-link>
                        </el-menu-item>
                        <!-- 有二级菜单的 -->
                        <el-submenu :index="index+''" v-else>
                            <template slot="title">{{item.meta.title}}</template>
                            <el-menu-item  v-for="(item_,index_) in item.children" :key="index_" :index="index+'-'+index_">
                                <router-link :to="{name:item_.name}">{{item_.meta.title}}</router-link>
                            </el-menu-item>
                        </el-submenu>
                    </div>
            </el-menu>
        </div>
        <div class="content">
            <!-- 面包屑 -->
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" :to="{ path: item.path}">{{item.meta.title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- 路由出口 -->
            <router-view></router-view>
        </div>
    </div>
</template>

js部分:

export default {
    data(){
        return{
        }
    },
    computed:{
        // 侧边导航数据
        routes(){
            // 从$router.options中获取所有路由信息并过滤
            return this.$router.options.routes.filter((item)=>{
                return item.meta.showInbreadcrumb
            });
        },
        // 面包屑数据
        breadcrumb(){
            // 根据路由配置meta中的showInbreadcrumb字段过滤
            let matchedArr = this.$route.matched.filter((item)=>{
                return item.meta.showInbreadcrumb}
            );
            // 因为首页比较特殊,必须一直显示在面包屑第一个,如果没有首页路由信息,手动添加到最前面
            if(matchedArr[0].meta.title !== '首页'){
                matchedArr.unshift(
                    {
                        path:'/home',
                        meta:{  
                            title:"首页",
                            showInbreadcrumb:true
                        }
                    },
                )
            }
            return matchedArr;
        },
    }
}

注意:拿到this.$route.matched后,不能在其结果上直接追加然后再过滤,否则会页面错乱并且报错,应该先filter,这样会返回一个新的数组,然后再判断追加首页信息

最终效果

到此这篇关于基于vue-router的matched实现面包屑功能的文章就介绍到这了,更多相关vue-router matched面包屑内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue+node+socket io实现多人互动并发布上线全流程发布时间:2022-02-05
下一篇:
基于vue封装下拉刷新上拉加载组件发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap