DDR爱好者之家 Design By 杰米

固定路由的面包屑导航

我们在配置router的时候,可以将面包屑数据配置在meta中,

例如

路由配置:

{
  path: '/project/process/:id',
  name: 'process',
  component: () => import('@/views/project/process/main.vue'),
  meta: [
    { name: '项目管理列表' },
    { name: '项目列表', url: '/project/list' },
    { name: '里程碑' },
  ],
},

代码:

<el-breadcrumb separator-class="el-icon-arrow-right">
 <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
    <router-link v-if="item.url" :to="item.url">{{item.name}}</router-link>
    <a v-else>
      {{item.name}}
    </a>
  </el-breadcrumb-item>
</el-breadcrumb>

如果单纯的是展示,就可以不用写url链接,路由配置成这样

{
  path: '/project/process/:id',
  name: 'process',
  component: () => import('@/views/project/process/main.vue'),
  meta: [‘项目管理', '项目进度', '里程碑'],
},

然后代码:

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{path: '/home'}">首页</el-breadcrumb-item>
  <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
  {{item}}
  </el-breadcrumb-item>
</el-breadcrumb>

解决Vue多级动态面包屑导航

针对一些比较固定式的面包屑是很好实现的,但是我们在项目中经常会遇到一些动态路由,

例如: A页面路由为 /list

从A页面跳转到B页面为 /list/:id

B页面下又存在一个字页面, /list/detail

我们在C页面想通过面包屑导航的方式进入B页面怎么办呢?

针对这种动态嵌套多级路由应该怎么处理呢?

配置路由

...
{
  path: '/type',
  name: 'type',
  component: () => import('@/views/type/main.vue'),
  meta: [
    { name: '项目分类' },
  ],
},
{
  path: '/type/list/:id',
  name: 'list',
  component: () => import('@/views/list/type/main.vue'),
  meta: [
    { name: '项目分类', url: '/list' },
    { name: '项目列表' },
  ],
},
{
  path: '/list/detail',
  name: 'detail',
  component: () => import('@/views/type/list/detail/index.vue'),
  meta: [
    { name: '项目分类', url: '/list' },
    { name: '项目列表', url: '/type/list' },
    { name: '详情' },
  ],
},
...

可以看出这个路由没有什么区别,唯一值得注意的一点就是里详情页面,是一个动态的路由,从详情页面跳转到项目列表我们需要相应的id信息,但是此时id我们不能固定填入,而是一个动态的值。

修改detail页面

在milestone页面监听beforeRouteEnter事件

beforeRouteEnter(to, from, next) {
  const meta = to.meta;
  for (let i = 0; i < meta.length; i++) {
    if (meta[i].name === '项目列表') {
      meta[i].url = `/type/list/${from.params.id}`;
    }
  }
  next();
  },

在beforeRouteEnter事件中修改meta信息,从而更新面包屑的导航路由。

主要的实现思路就是在目标页面添加beforeRouteEnter事件,然后更改其meta配置信息,从而达到更改面包屑导航路径。

如果你还有更好的解决办法,欢迎留言。

以上这篇Vue 解决多级动态面包屑导航的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。