vue 中面包屑带跳转的做法

首先要在子页面的meta中定义

{path: '/staffsManagement',component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/systemSetting/staffsManagement/index.vue'),meta: [{ name: '员工管理' }],},{path: '/staffsManagement/addedstaff',component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/systemSetting/staffsManagement/addedstaff.vue'),meta: [{ name: '员工管理' ,url:'/staffsManagement'},//子页面的meta中要携带父页面的名称以及路径{name:'新建员工'}],},

下来设置面包屑

<el-breadcrumb separator="/" style="margin:20px"><el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item><el-breadcrumb-item v-for="(item,index) in this.$route.meta" :key="index" :to="item.url"><router-link v-if="item.url" :to="item.url">{{item.name}}</router-link><a v-else>{{item.name}}</a></el-breadcrumb-item>
</el-breadcrumb>

vue 中面包屑带跳转的做法相关推荐

vue实战-面包屑的处理
vue实战-面包屑的处理 1.面包屑处理分类操作在Search路由模块下通过v-if来确定面包屑的存在,设置点击事件处理删除面包屑后的情况 <ul class="fl sui-ta ...
Vue 封装面包屑（即粘即用）
效果展示(后台管理系统中常用) 如果你也需要如图所示的效果直接把下面的代码粘贴过去即可不需要父组件传递任何参数十分好用: 基本思路: 监听 $route 路由信息: 把当前的信息添加至数组,循环 ...
vue动态面包屑导航
说明:根据不同的页面动态生成不同的面包屑导航 (不用在每个页面写死面包屑) router.js路由文件: {path:'/index',name:'index',component:()=>im ...
Vue动态面包屑功能的实现方法
面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级. 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能.以下案例都是使用 ...
前端笔记-Vue中缺少router-view导致跳转失效
今天这个问题搞了我2个多小时,原因是我在App.vue里面把<router-view/>删除了,导致了跳转失败! 最后才发现,这个App.vue被改了,在此记录下,方便以后查阅! 这里个人 ...
vue动态面包屑导航的使用
动态面包屑导航是根据路由中的 matched 获取到的单独提取出面包屑导航栏组件 <template><el-breadcrumb class="app-breadcru ...
【Vue】Vue 中如何点击跳转页面
2022-04-11更新:完整的跳转页面方法的详解:[Vue | 补洞 | 18]编程式路由导航思路:在有路由的情况下,对页面进行注册,并通过方法对路由中的实例(页面)进行转发,达到跳转页面的效果 ...
修改elementUI中面包屑文字颜色
1.修改面包屑文字大小 ::v-deep {.el-breadcrumb__item {font-size: 35px;} } 2.修改面包屑文字颜色 .el-breadcrumb ::v-deep ...
php 拖拽上传文件进度,在Vue中如何实现带进度条的文件拖动上传功能
这篇文章主要介绍了Vue实现带进度条的文件拖动上传功能,本文通过实例代码给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下 1. 基本界面 content="width=devic ...

vue 中面包屑带跳转的做法

vue 中面包屑带跳转的做法相关推荐

最新文章

热门文章