位置: IT常识 - 正文

vue-router + element-plus实现面包屑导航栏和路由标签栏

编辑:rootadmin
vue-router + element-plus实现面包屑导航栏和路由标签栏 效果预览

推荐整理分享vue-router + element-plus实现面包屑导航栏和路由标签栏,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

首先,先解释一下什么是面包屑导航栏和路由标签栏。

如下图所示,面包屑导航栏就是展示当前所处路由信息和父辈路由信息的导航栏,它的作用是提示用户当前页面所在位置;路由标签栏就类似于浏览器的标签栏,每个标签对应一个路由页面,点击该标签可以进入该路由页面。

在这里解释一下,我所说的父辈路由是父路由的超集,对于一个子路由,它的父路由、它的父路由的父路由、它的父路由的父路由的父路由…都属于它的父辈路由。我也不知道这种叫法是否规范,反正大家理解这个意思就行。

然后展示一下效果: 这是我自己做的一个基于vue3+typescript的网站,后端是用golang写的,网站有查询微博、百度、凤凰历史热搜的功能,以及上传图片、创建相册、分享相册等云图床相关功能。这是网站预览地址和gitee仓库地址。(ps:此网站并不是一个demo,而是具有完整前后端交互和一定功能的网站,需要注册并登陆才能使用,注册很简单,只需要设置用户名、账号、密码即可。**也可登陆测试账号: admin,密码: 123456。**但如果有两人同时登陆这个测试账号,那么后者会把前者挤下去,当然这种概率很小罢了。)

对于侧边导航栏如何实现的,请移步这篇文章:vue-router + element-plus实现多层级路由的动态展示

在本文章中,我主要讲解如何实现面包屑导航栏和路由标签栏。

面包屑导航栏的实现

先讲一下大体思路:

首先弄清楚面包屑导航栏要展示哪些数据然后想办法获取这些数据最后把数据应用到组件中

首先,面包屑展示哪些数据?

路由的结构其实就是一棵树,没有子路由的路由对应树中的一个叶子节点,面包屑导航栏中要展示的就是这个当前页面对应的子路由、以及该子路由所有的父辈路由。

为了方便说明,我举个例子,现在有一个网页的路由结构如下图中所示,假如当前我们处于localhost:8080/earth/asia/china页面,那么当前页面的子路由就是中国,它有两个父辈路由分别是亚洲和地球,所以我们要在面包屑中展示的信息就是 “地球 / 亚洲 / 中国” 然后,如何获取这些数据?

在一棵树中,要获得一个叶子节点的所有父辈节点信息,可以从根节点开始进行dfs深度优先搜索,在搜索的过程中存一下在当前分支上搜过的路径,如果遇到叶子节点就把路径保存起来作为结果。

vue-router + element-plus实现面包屑导航栏和路由标签栏

这种方法是一种可行方案,但其实还有更简单的方法。我们可以把这棵树线索化,在每个节点中存一下父节点的信息,那么就可以根据该节点直接获得父节点,进而获得父节点的父节点,父节点的父节点的父节点…,递归操作,就可以该节点获得所有父辈节点信息。

下面是从我的网站源码/src/router/index.ts中截取出来的代码,可以看到我在meta里自定义了一个parentRouteName属性,这个属性就是线索属性,我们可以借助这个属性获取该路由的父路由。

{path: 'weibo',name: 'Weibo',component: () => import('../views/hot/Weibo.vue'),meta: {description: '微博热搜查询',parentRouteName: "Hot",showInAside: true,showInHeader: true}},

下面这个函数的作用是获取某个路由的所有父辈路由信息,参数name是子路由的名称,参数routes是路由数组,返回值是一个string数组,它的值是 […, 爷爷路由名称, 父亲路由名称, 子路由名称]。

依然沿用上面的例子,假如我们传入的name属性等于’china’,那么函数的返回值是[‘earth’, ‘asia’, ‘china’]

// 获取面包屑的路由名称数组export function getNames(name: string, routes:RouteRecordNormalized[]): string[]{ let names: string[] = [] // 使用while循环进行递归操作,直至遍历到最顶级的父辈路由,然后退出循环 while(true){ names.push(name) let route = getRouteByName(name, routes) as RouteRecordNormalized let parentRoute = getRouteByName(route.meta?.parentRouteName as string, routes) if(parentRoute){ name = parentRoute.name as string continue } else{ break } } return names.reverse()}

最后,将数据写入element-plus提供的面包屑组件

获取了数据之后,接下来要做的就很简单了,只需要把数据写到面包屑组件里做展示即可,如下面代码所示。

还需要添加一个路由守卫,在每次路由跳转后都要更新面包屑里的数据。其实可以写成计算属性的,毕竟route对象和router对象都是响应式的。

下面的代码是从源码/src/components/layout/Header.vue里截出来的,想看完整的代码请访问gitee仓库地址。

<template><el-breadcrumb separator="/"> <el-breadcrumb-item v-for="description,index in descriptions" :key="description" :to="{ name: routeNames[index] }" class="breadcrumb-item" > {{description}} </el-breadcrumb-item></el-breadcrumb></template><script setup lang="ts">import { getNames, getDescriptions, getRouteByName } from '../../util/handleRoutes'import {useRouter, useRoute, RouteRecordNormalized} from 'vue-router'const router = useRouter()const route = useRoute()let descriptions = ref<string[]>([])let routeNames = ref<string[]>([])//获取面包屑的数据routeNames.value = getNames(route.name as string, router.getRoutes()) descriptions.value = getDescriptions(routeNames.value, router.getRoutes())//在每次路由跳转后,更新面包屑的数据router.afterEach((to, from) => { //不知道为什么,进入页面时,会有两次路由跳转,route.name为空 if(!route.name){ console.log(route.name, route.meta) return } routeNames.value = getNames(route.name as string, router.getRoutes()) descriptions.value = getDescriptions(routeNames.value, router.getRoutes())})</script>路由标签栏的实现

和上面的思路类似,要实现路由标签栏,我们也是分三个步骤:

首先,考虑路由标签栏需要哪些数据然后,如何获取这些数据最后,如何把这些应用到组件并展示出来

首先,路由标签栏需要哪些数据?

类比一下,浏览器标签栏存放的是曾经访问过的网页,那么很显然路由标签栏需要的数据就是曾经访问过的路由页面。

然后,如何获取访问过的路由页面?

我是这样做的,在pinia里定义一个routerStore,里面有个visitedRoutes属性,用来存放所有访问过的路由,它的初始值只包含首页对应的路由。

import { defineStore } from "pinia"import { RouteRecordNormalized} from "vue-router"import { router } from "../router"import { getRouteByName } from "../util/handleRoutes"let defaultRoute = getRouteByName('Home', router.getRoutes()) as RouteRecordNormalizedlet visitedRoutes = [defaultRoute]export const useRouteStore = defineStore('route', { // 推荐使用 完整类型推断的箭头函数 state: () => { return { visitedRoutes } },})

添加一个路由守卫,在每次路由跳转后,如果进的路由不存在于visitedRoutes,那么把这个路由添加到visitedRoutes里面。

router.afterEach((to, from) => { if(!to.meta.showInHeader){ return } let result = routeStore.visitedRoutes.find(val => val.name == to.name) if(!result){ routeStore.visitedRoutes.push(getRouteByName(to.name as string, router.getRoutes()) as RouteRecordNormalized) }})

最后,把历史访问数据应用到组件里

这一步比面包屑的最后一步要复杂一些,因为路由标签的交互比较多,当路由标签被点击时,需要跳转到相应路由。当路由标签被关闭时,如果当前页面并不是要关闭的路由标签,那么直接关闭即可;如果当前页面时要关闭的路由标签,那么需要进行路由跳转,跳转到首页。 下面的代码是从源码/src/components/layout/Header.vue里截出来的,想看完整的代码请访问gitee仓库地址。

<template> <div class="header-part-two"> <el-tag v-for="visitedRoute in routeStore.visitedRoutes" :key="visitedRoute.name" :closable="visitedRoute.name != 'Home'" :disable-transitions="false" @close="handleClose(visitedRoute.name as string)" @click="goToRoute(visitedRoute.name as string)" @click.middle="handleClose(visitedRoute.name as string)" :class="{'active-tag': isActive(visitedRoute.name as string)}" > {{ visitedRoute.meta?.description }} </el-tag> </div></template><script>import {useRouter, useRoute, RouteRecordNormalized} from 'vue-router'import { useRouteStore } from '../../store/route'const routeStore = useRouteStore()const router = useRouter()const route = useRoute()// 跳转function goToRoute(name:string){ router.push({name})}function isActive(name:string){ return name == route.name }// 关闭function handleClose(routeName: string){ if (routeName === 'Home') { return } routeStore.visitedRoutes = routeStore.visitedRoutes.filter(val => val.name != routeName) if(route.name == routeName){ router.push('/') }}</script>
本文链接地址:https://www.jiuchutong.com/zhishi/300155.html 转载请保留说明!

上一篇:【MySQL】表的数据处理(mysql表中数据)

下一篇:用Pytorch搭建一个房价预测模型(pytorch创建模型)

  • 苹果电脑亮度调节怎么设置(苹果电脑亮度调到0黑屏了怎么办)

    苹果电脑亮度调节怎么设置(苹果电脑亮度调到0黑屏了怎么办)

  • 如何关闭抖音自动更新系统(如何关闭抖音自己的作品)

    如何关闭抖音自动更新系统(如何关闭抖音自己的作品)

  • app与ipad不兼容怎么办(app与ipad不兼容应该怎么下载)

    app与ipad不兼容怎么办(app与ipad不兼容应该怎么下载)

  • 显卡升级对电脑有影响吗(升级显卡对电脑性能有提升吗?)

    显卡升级对电脑有影响吗(升级显卡对电脑性能有提升吗?)

  • 主板rgb接口在哪里(主板rgb接口怎么用)

    主板rgb接口在哪里(主板rgb接口怎么用)

  • vivo应用分身太少了(vivo手机应用分身其他软件)

    vivo应用分身太少了(vivo手机应用分身其他软件)

  • 荣耀手机声音突然变小了,调不大怎么办(荣耀手机声音突然很小)

    荣耀手机声音突然变小了,调不大怎么办(荣耀手机声音突然很小)

  • 路由器插上网线就可以用了吗(路由器插上网线怎么设置)

    路由器插上网线就可以用了吗(路由器插上网线怎么设置)

  • 电脑桌面截图快捷键ctrl加什么(电脑桌面如何截图 截屏)

    电脑桌面截图快捷键ctrl加什么(电脑桌面如何截图 截屏)

  • 华为p10重量(华为p10重量是多少)

    华为p10重量(华为p10重量是多少)

  • vivo手机如何安装高危软件(vivo手机如何安装2个微信)

    vivo手机如何安装高危软件(vivo手机如何安装2个微信)

  • 为什么b站视频加载不出来(为什么b站视频会绿屏)

    为什么b站视频加载不出来(为什么b站视频会绿屏)

  • ipadwifi版可以连热点吗(ipadwifi版可以连热点吗air5)

    ipadwifi版可以连热点吗(ipadwifi版可以连热点吗air5)

  • ip地址相同是不是黑客(ip地址 相同)

    ip地址相同是不是黑客(ip地址 相同)

  • 个人计算机pc属于类型(个人计算机PC属于微型计算机)

    个人计算机pc属于类型(个人计算机PC属于微型计算机)

  • 手机出声孔怎么清理(手机出声孔怎么设置)

    手机出声孔怎么清理(手机出声孔怎么设置)

  • 荣耀MagicBook 14的电池容量是多少(荣耀magicbook14的14是什么意思)

    荣耀MagicBook 14的电池容量是多少(荣耀magicbook14的14是什么意思)

  • 手机怎么取消sos(手机怎么取消SOS)

    手机怎么取消sos(手机怎么取消SOS)

  • 苹果6隐私相册在哪里(苹果6隐私相册怎么加密码)

    苹果6隐私相册在哪里(苹果6隐私相册怎么加密码)

  • ios系统和安卓系统的区别(IOS系统和安卓系统互通吗)

    ios系统和安卓系统的区别(IOS系统和安卓系统互通吗)

  • 蹭过的wifi突然连不上(蹭wifi突然搜不到了)

    蹭过的wifi突然连不上(蹭wifi突然搜不到了)

  • 猎聘网如何屏蔽企业(猎聘网如何屏蔽原公司)

    猎聘网如何屏蔽企业(猎聘网如何屏蔽原公司)

  • 在滴滴上丢东西怎么办(在滴滴丢了东西怎么办)

    在滴滴上丢东西怎么办(在滴滴丢了东西怎么办)

  • win1020H2搜狗输入法不显示怎么办(win10 搜狗)

    win1020H2搜狗输入法不显示怎么办(win10 搜狗)

  • dedecms解决移动端首页不自动更新问题(dedecms使用教程)

    dedecms解决移动端首页不自动更新问题(dedecms使用教程)

  • 坏账准备要写到明细账里面吗
  • 异地车辆流程
  • 固定资产减少如何处理
  • 工资记借方还是贷方
  • 报税时资产总额怎么填
  • 无形资产按几年摊
  • 收到上年多缴的企业所得税
  • 电子发票报销怎么用
  • 高速路费电子发票怎么打印
  • 房地产公司机构
  • 货物发出未开票不确认收入
  • 无形资产摊销以前年度摊多了
  • 营改增是什么时候提出的
  • 金税三期申报代扣代缴增值税流程步骤分析
  • 请问高人们旧房子要装修应怎样装
  • 从业人数如何计算
  • 个税零申报工资填0吗
  • 公司向职工借款不还怎么办理
  • 长期股权投资账务处理
  • 资产收购账务处理
  • 贸易公司购入商品会计分录
  • 退休人员再就业受伤算工伤吗
  • 民营非盈利企业好申请吗
  • 个人以房产投资一人有限公司时,房产要开发票吗
  • 修改hosts文件的软件
  • php实验步骤
  • mac 快速切换输入法
  • 夜晚的地球 (© NASA)
  • php遍历结果集
  • 阿尔卑斯山百度百科
  • 招待费增值税能抵扣吗
  • 企业进项税大于销项税财务怎么做分录
  • php 上传文件
  • php制作验证码
  • 实收资本(或股本)是什么意思
  • php分页查询的简称是什么
  • 农业公司经营项目有哪些?
  • es6 promise finally
  • php不执行
  • 个体工商户开税户
  • Android ViewPager2 + Fragment 联动
  • 帝国cms使用手册
  • 数据库损坏了怎么修复
  • sql server评估期已过版本升级时重启失败
  • 借贷记账法的记账规则是
  • 成本核算需要哪些数据
  • 临时工工资账务处理该怎么进行
  • 商业承兑汇票在网银上怎么查询
  • 出口货物申报表如何填写
  • 企业实收资本与实缴资本
  • 不良品怎么入账
  • 产品销售收入的确认条件
  • 个税租房抵扣细则
  • 公司的钱如何提出来
  • 财务顾问费可以税前扣除吗
  • mysql日期和时间函数
  • SQL Select语句完整的执行顺序
  • windows vista安装光盘进入dos
  • mac如何设置启动系统
  • 只需要30秒让让你的电脑速度快一倍
  • win8 怎么样
  • win7系统局域网无法看到其他电脑
  • win7安装cad2010
  • windows7旗舰版怎样扩大虚拟内存
  • 混合痔疮怎么治疗最好方法 女性
  • js math.js
  • js message事件
  • 不通过肾门的结构都有什么
  • js设计模式书
  • Unity NGUI Tween的用法
  • pycharm sftp
  • python 脚本
  • 全面解析日本失去的十年
  • 浙江电子税务局网上开票
  • 云南国税局官网网站
  • 威海行风热线实时收听
  • 2020年民主生活会主题是什么?
  • 公共基础设施项目所得税优惠目录
  • 房产税是按套还是按套
  • 重庆市深化新时代教育评价改革幼儿园
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设