vue3+Typescript实现路由标签页和面包屑功能
在vue中实现路由标签页和面包屑
在使用 Vue.js 开发后台管理系统时，经常会遇到需要使用路由标签页的场景。本文介绍如何使用 Vue.js 实现路由标签页。
需求分析
我们需要实现以下功能：
- 点击菜单或路由时，在页面上打开一个新标签页。
- 根据当前路由自动添加标签，如果标签已存在则不再添加。
- 可以通过关闭标签来切换当前标签页，并自动跳转到前一个标签页所对应的路由。
最终效果
实现步骤
第一步：创建路由标签组件和面包屑
我们可以使用 Element UI 中的 el-tag 和breadcrumb组件来实现路由标签以及面包屑
<el-header height="80px">
<div class="head_info">
<div class="head_local">
<el-breadcrumb>
<el-breadcrumb-item :to="{ path: '/console' }">主页</el-breadcrumb-item>
<el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<div class="head_tag">
<el-tag v-for="tag, index in tags" :key="index" :closable="tag.path !== '/console'" class="mx-1"
:disable-transitions="false" @close="handleClose(tag)">
<router-link :to="tag.path">{{ tag.name }}</router-link>
</el-tag>
</div>
</el-header>在组件中，我们首先使用 defineProps 创建一个名为 tag 的属性来接收标签对象。然后，在模板中使用 v-bind="$attrs" 将所有父级作用域中的属性传递给 el-tag 组件。最后，我们将标签的标题和路由链接包含在 router-link 组件中。
第二步：创建路由标签数组
定义了一个名为tags的响应式数据对象，有两个属性，分别是 name 和 path，表示标签页的名称和路径。默认首页加入tag标签组，后面加入判断条件将首页不可删除。
const tags = reactive([
{ name: '首页', path: '/console' }
])第三步：监听路由变化并自动添加新标签
我们可以使用 watchEffect 函数来监听当前路由的变化，并根据当前路由自动添加新标签。
watchEffect(() => {
// 如果当前路径不是 '/' 并且该路径没有对应的标签，则新增一个标签
if (route.path !== '/console' && !tags.some((tag) => tag.path === route.path)) {
const tag = { name: route.meta.title as string, path: route.path };
tags.push(tag);
}
});在上面的代码中，我们首先检查当前路径是否为“/console”，如果不是，则进行如下操作：
- 检查当前路径是否已经存在标签数组中。
- 如果不存在，则创建一个新标签对象，并将其添加到标签数组中。
第四步：处理关闭标签事件
当用户点击某个标签的关闭按钮时，我们需要从标签数组中删除该标签，并自动跳转到前一个标签页所对应的路由。
const handleClose = (tag: any) => {
const index = tags.findIndex((t) => t.path === tag.path);
if (index !== -1) {
router.push(tags[index - 1].path);
setTimeout(() => {
tags.splice(index, 1);
}, 0)
}
}在上面的代码中，我们首先通过findIndex获取要关闭的标签对象在标签数组中的索引。然后，使用 router.push 将页面自动跳转到前一个标签页所对应的页面。这里使用setTimeout函数主要是进行异步操作，为了确保删除操作在下一次 DOM 渲染时进行。如果不添加的话会导致用户点击后页面跳转了，但是tag标签没有进行关闭。
第五步：当前路由标题同步面包屑
const title = computed(() => route.meta.title);
使用 route.meta.title 表达式获取当前路由信息对象中的meta属性下的 title 值。这里的 meta 属性可以在路由配置信息中设置，用于存储一些与路由相关的元数据，以便在程序运行时进行访问和使用。当 title 计算属性的值发生变化时，与之相关联的 DOM 元素也会自动更新。
其他补充：
路由信息：
{
path:"/adminIndex",
component:adminIndex,
meta:{title: '主页' },
children:[
{
path: "/console",
component: Console,
meta:{title: '工作台' }
},
{
path:"/newList",
component:newList,
meta:{title: '新闻管理-视频管理' }
},
{
path:"/paperList",
component:paperList,
meta:{title: '文章管理' }
}
]
},到此这篇关于vue3+Typescript实现路由标签页和面包屑的文章就介绍到这了,更多相关vue3面包屑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家分享一篇vue 组件 全局注册和局部注册的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue实现微信浏览器左上角返回按钮拦截功能,本文通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
在之前的前端开发中，为了实现我们的需求，通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素，得益于 Jquery 对于 DOM 元素优异的操作能力，我们可以很轻易的对获取到的 DOM 元素进行操作。这篇文章主要介绍了Vue 中 ref 的使用 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了如何解决vue2.0下IE浏览器白屏问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue中的同步调用和异步调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
闲话少说，我们进入今天的小小五分钟学习时间，前面我们了解了vue的组件，我们本文主要是讲解vue的动态组件和内置组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
在Vue.js项目初始化和构建过程中,可能会遇到多种问题,首先,npm install过程中报错,如提示“No such file or directory”,建议删除package-lock.json文件后重新安装,在build或run时,若出现core-js相关错误2024-09-09
这篇文章主要介绍了vue中如何实时监听本地存储，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue3+echarts实现好看的圆角环形图效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了vue实现移动端返回顶部，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
最新评论