文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue怎么实现面包屑

2023-06-30 02:41

关注

本文小编为大家详细介绍“vue怎么实现面包屑”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么实现面包屑”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

vue中面包屑的实现方法,供大家参考,具体内容如下面包屑是什么:

vue怎么实现面包屑

实现原理:

在router配置中加入meta(元数据)对象,存放一些自定义的内容。例如在面包屑的实现中加入title变量,这个变量则是面包屑展示出来的多级。

在用到面包屑的页面中调用watch监听,监听route的变化,用this.$route.matched获取到匹配当前路由的所有片段的配置参数对象,返回一个数组,存到list中

用v-for 遍历li标签,将list.meta.title作为router-link的{信息},:to=“list.path”,将list信息动态渲染到面包屑上

具体的代码演示

面包屑组件:

breadcrumb.vue

<template>    <div class="breadcumb">        <ul>          <li v-for="(v,i) in lists" :key="i">            <router-link :to="{path:v.path}">{{v.meta.title}}</router-link>            <span v-if="i<lists.length-1">/</span>          </li>        </ul>      </div></template><script>export default {  name: 'Home',  data(){    return {      lists:[]    }  },  //监听路由变化  watch:{    $route(to,from){      let matched = to.matched;   //this.$route.matched      //这个地方是为了固定第一级目录是首页不变      if(matched.length && matched[0].name!=="home"){        matched = [{ path: '/home',name: 'home',meta:{title:'首页'}},...matched];      }      ...数组名 是一种追加数组的方法      var arr = [1,2,3]      var arr1 = [4,5]      var arr2 = [2,...arr1] == [2,4,5]      //      this.lists = matched;    }  }}</script>

配置路由文件:

router/index.js

{    path: '/list',    name: 'list',    meta:{title:'列表展示'},    component: () => import('../views/list/index.vue'),    children:[{      //二级路由          //path:'testA',              path:'/list/testA',            name:'testA',          meta:{title:'子列表A'},          component: () => import('../views/list/part1.vue')        },        {          path:'testB',             name:'testB',          meta:{title:'子列表B'},          component: () => import('../views/list/part2.vue')    }]  },

读到这里,这篇“vue怎么实现面包屑”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯