ZHANGJUN
新手
新手
  • 最后登录2021-11-16
  • 发帖数3
  • 社区居民
阅读:440回复:1

[vue]vue+matched 生成一个自己的面包屑

楼主#
更多 发布于:2021-09-28 20:02
最近写了一个后台的demo,由于需求需要根据自己的路由生成一个面包屑;所以去网上搜索了一下对网上的代码进行了整合理解;顺便做一个记录以便日后查看。
1.首先来看看需求
企业管理 > 档案管理 > 许可申请


在这次的demo中我们要根据用户点击不同导航时改变面包屑的状态
2.再让我们来看看我们的路由吧
 
{
            path: '/systemManagement',
            name: 'systemManagement',
            component: () => import(/* webpackChunkName: "about" */ '../components/qygl.vue'),
            meta: {title:'企业管理'},
            children:[
              {
                path: '/fileManagement',
                name: 'fileManagement',
                component: () => import(/* webpackChunkName: "about" */ '../components/qygl/dagl.vue'),
                meta: {title:'档案管理'},
                children:[
                  {
                    path: '/',
                    name: 'PersonnelInformation',
                    component: () => import(/* webpackChunkName: "about" */ '../components/qygl/PersonnelInformation.vue'),
                  },
                  {
                    path: '/Applicationforpermission2',
                    name: 'Applicationforpermission2',
                    component: () => import(/* webpackChunkName: "about" */ '../components/qygl/Applicationforpermission2.vue'),
                    meta: {title:'许可申请'}
                  },
                ]
             },
          ]
}

此处的路由逻辑为:企业管理 > 档案管理 > 许可申请
3.那么我们应该如何实现呢?
当然是选择使用matched了啦,那matched是什么呢?
matched返回的是一个数组,包含了当前路由的所有嵌套路径的路由记录,那么我们怎么得知当前匹配的路由的信息以及如何展示给用户呢?
vue在路由中有一个meta属性,里面可以包含许多的信息,那么既然这样是不是我们就可以在这里做文章了呢,答案是肯定的,我们可以给meta属性加上一个title属性,在title中添加我们对当前路由的一些解释,就像这样
meta: {title:'许可申请'}
那么我们这样配置好路由后,怎么实现呢?
直接先上代码吧
export default {
      name: "breadcrumb",
       data() {
             return {
                  levelList: []
               }
          },
        watch: {
            $route() {
                   this.getBreadcrumb()
             }
          },
         created(){
               this.getBreadcrumb()
         },
         methods:{
               getBreadcrumb() {
                    //$route.matched一个数组 包含当前路由的所有嵌套路径片段的路由记录
                  let matched = this.$route.matched.filter(item => item.name)
                  const first = matched[0];
                  if (first && first.name.trim().toLocaleLowerCase() !== 'Home'.toLocaleLowerCase()) {
                           matched = [{ path: '/Home ', meta: { title: 'Home' }}].concat(matched)
                 }
                  this.levelList = matched
                }
         }
 }  
这里,我们定义了一个函数去得到当前路由的记录,并将其存入数组中,供给组件调用,在创创建完成后调用了该函数,
watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态,所以我们使用了watch去监听整个路由的变化情况


template中的代码
  
<div class="navbar clearfix">
        <el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><router-link to="/BackStageHome">首页</router-link></el-breadcrumb-item>
            <div class="router">
                <el-breadcrumb-item class="whitec" v-for="item in levelList":key="item.path" :to="item.path">pw_item.meta.title</el-breadcrumb-item>
            </div>
        </el-breadcrumb>
    </div>
这里的逻辑是在页面中遍历得到的levelList数组,将其中的路由提取出来,并生成面包屑。我在这里使用的是elementUI ,大家也可以根据自己的需求进行设计 以上这篇Vue路由对象属性matched就是我分享给大家的内容了,如有不对的地方欢迎大家的指正。
小魏学编程
新手
新手
  • 最后登录2021-11-22
  • 发帖数4
沙发#
发布于:2021-09-28 20:25
张菊666啊
游客


返回顶部

公众号

公众号