目录
在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: '文章管理' }
}
]
},