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

2024-12-15 01:02:25

固定路由的面包屑导航

我们在配置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 解决多级动态面包屑导航的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vue2.0 elementUI制作面包屑导航栏

Main.js var routeList = []; router.beforeEach((to, from, next) => { var index = -1; for(var i = 0; i < routeList.length; i++) { if(routeList[i].name == to.name) { index = i; break; } } if (index !== -1) { //如果存在路由列表,则把之后的路由都删掉 routeList.splice(index
vue中的面包屑导航组件实例代码

vue的面包屑导航组件用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.pat
Vuex,iView UI面包屑导航使用扩展详解

本案例是基于Vuex的公共数据库,你在了解本案例之前要了解Vuex的使用方法. https://www.iviewui.com/components/breadcrumb 打开网址我们可以知道这个组件的面包屑导航是基于路由跳转的.但是我们项目中常常用到单页面查询面包屑导航.小生开始为这个纠结好久.然后和小伙伴一起研究出来一套单页面不用路由跳转的使用方法. 先看看效果图 1,首次进来 2,查询结果 3,再次点击面包屑导航 4,查询结果基本的效果是这样的下面看代码 <template> <
vue+elementUI动态生成面包屑导航教程

效果如下所示: 项目需要动态生成面包屑导航,并且首页可以点击.其余为路径显示 <el-menu :unique-opened="true" router :default-active="$route.path" @select="handleSelect"> <div class="user-menu-box" v-for="menu in menus" :key="menu.
Vue 解决多级动态面包屑导航的问题

固定路由的面包屑导航我们在配置router的时候,可以将面包屑数据配置在meta中, 例如路由配置: { path: '/project/process/:id', name: 'process', component: () => import('@/views/project/process/main.vue'), meta: [ { name: '项目管理列表' }, { name: '项目列表', url: '/project/list' }, { name: '里程碑' }, ],
vue element-ui实现动态面包屑导航

vue element-ui动态面包屑导航,供大家参考,具体内容如下直接上代码一.template代码 // 这是单独的组件 <template> <el-breadcrumb separator-class="el-icon-arrow-right"> // 首页我是写死的,其他的遍历出来 <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item
vue实现动态面包屑导航

本文实例为大家分享了vue实现动态面包屑导航的具体代码,供大家参考,具体内容如下动态面包屑导航是根据路由中的 matched 获取到的单独提取出面包屑导航栏组件 <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group name="breadcrumb"> <el-bread
vue+elementUI实现动态面包屑

本文实例为大家分享了vue+elementUI实现动态面包屑的具体代码,供大家参考,具体内容如下引言后台管理系统中,经常会出现需要面包屑的情况,但是又不想每个页面都实现一个,这样不方便维护,因此封装了面包屑组件,方便在页面使用封装组件  <template> <div> <el-breadcrumb class="breadcrumb" separator=&q
vue.js实现动态面包屑

最近在学习vue,正好手上有个项目还是用jquery写的,就自己尝试将这个项目的前端用vue实现,途中遇到了动态面包屑的问题,特此记录一下,如有不对的地方,欢迎指正. 需求描述: 点击左侧的导航,跳转到不同的页面,并且根据导航的路径,动态生成面包屑.面包屑的数据均来自于左侧的导航. 思路: 1.面包屑作为一个单独的组件,在页面中引入.页面的结构如下: <template> <div class="page-center"> <top
vue动态路由实现多级嵌套面包屑的思路与方法

前言最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id) 功能比如:A列表页面路由如/a,点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛),点击B页面任意一列,再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的,如(/a:/b/03:/bdetail/0
vue 面包屑导航组件封装

目录一.为什么需要面包屑? 二.初级封装 1. 实现思路 2. 代码演示 3. 使用 4. 不足三.进阶封装 1. 实现思路 2. 代码演示 3. 使用 4. 不足四.高阶封装 1. 思路 2. 代码演示 3. 使用面包屑导航可以将浏览过的页面记录下来,方便很快速的跳转回某一个页面,本文介绍了几种自己封装面包屑组件的方式. 一.为什么需要面包屑? 当网页进行了多次跳转后,用户可能早就已经晕头转向了.作为程序猿的我们可能通过地址栏参数还可以分清楚当前处于哪一个位置,终归网页是要展示给用户.
Vue动态面包屑功能的实现方法

面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级. 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能.以下案例都是使用 Element-UI 进行实现. 最笨的方式首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好. <template> <div class="example-container"> <el-breadcrumb separator="

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

相关推荐

随机推荐