vue-router 利用 $route 的 matched 属性实现面包屑效果

vue-router 利用 $route 的 matched 属性实现面包屑效果我们以一个固定的路由表来说明 letroutes path component gt import pages layout Layout vue children name pageA path a component PageA children name

  1. 我们以一个固定的路由表来说明
    let routes = [ { 
          path: '/', component: () => import('../pages/layout/Layout.vue'), children: [ { 
          name: 'pageA', path: 'a', component: PageA, children: [ { 
          name: 'pageAA01', path: 'aa-01', component: PageAA01 }, { 
          name: 'pageAA02', path: 'aa-02', component: PageAA02 }, { 
          name: 'pageAA03', path: 'aa-03', component: PageAA03 }, ] } ] } ] 
  2. matched 顾名思义 就是 匹配,假如我们目前的路由是/a/aa-01,那么此时 this.$route.matched匹配到的会是一个数组,包含 '/''/a''/a/aa-01',这三个path的路由信息。然后我们可以直接利用路由信息渲染我们的面包屑导航。
    //demo 
          
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/228322.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月16日 下午7:18
下一篇 2026年3月16日 下午7:18


相关推荐

  • Manus 初解析:首款“通用 AI 智能体”,开源复刻“0 天起手”

    Manus 初解析:首款“通用 AI 智能体”,开源复刻“0 天起手”

    2026年3月15日
    2
  • Android代码混淆常见配置[通俗易懂]

    Android代码混淆常见配置[通俗易懂]Android代码混淆常见配置1.manifest中注册的都不能混淆,如果混淆了就找不到了,所以一下类不能被混淆,一般保持原样。-keeppublicclass*extendsandroid.app.Activity-keeppublicclass*extendsandroid.app.Application -keeppublicclass*exten

    2022年5月7日
    72
  • navicat15激活码【注册码】「建议收藏」

    navicat15激活码【注册码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月18日
    186
  • IE内存溢出报错Stack overflow at line[通俗易懂]

    IE内存溢出报错Stack overflow at line[通俗易懂]该错误只在IE中出现,出现该提示的原因主要有两种:1.重定义了系统的触发事件名称作为自定义函数名如: onclick/onsubmit… 都是系统保留的事件名称,不允许作为重定义函数名称。2.出现死循环,都提示:Stackoverflowatline:0,如:在图片对象定义了onerror事件的循环处理、onload这里并不是说/im

    2022年7月15日
    20
  • 能向入口函数传入多个参数的 QueueUserWorkItem

    能向入口函数传入多个参数的 QueueUserWorkItem不啰嗦了,花一周时间也没赶上std::async和std::thread的设计,标准库的设计真的,很优秀。我记下这段时间里做了什么;这里包含了把函数拆成两步调用的方法,第一步传参,第二步执行;SplitInvoke;如果我能把第一步放到A线程,第二步放到B线程,就能解决std::thread潜在的两次拷贝和对象(Windows的窗口对象等)绑定到线程问题,就能制造一个优于std::…

    2026年3月6日
    5
  • 应用架构、业务架构、技术架构和业务流程图详解

    应用架构、业务架构、技术架构和业务流程图详解应用架构应用架构 ApplicationA 是描述了 IT 系统功能和技术实现的内容 应用架构分为以下两个不同的层次 企业级的应用架构 企业层面的应用架构起到了统一规划 承上启下的作用 向上承接了企业战略发展方向和业务模式 向下规划和指导企业各个 IT 系统的定位和功能 在企业架构中 应用架构是最重要和工作量最大的部分 他包括了企业的应用架构蓝图 架构标准 原则 系统的边界

    2026年3月19日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号