在vue中实现路由标签页和面包屑

在使用 Vue.js 开发后台管理系统时，经常会遇到需要使用路由标签页的场景。本文介绍如何使用 Vue.js 实现路由标签页。

需求分析

我们需要实现以下功能：

点击菜单或路由时，在页面上打开一个新标签页。
根据当前路由自动添加标签，如果标签已存在则不再添加。
可以通过关闭标签来切换当前标签页，并自动跳转到前一个标签页所对应的路由。

最终效果

vue3+Typescript实现路由标签页和面包屑-LMLPHP

实现步骤

第一步：创建路由标签组件和面包屑

我们可以使用 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实现路由标签页和面包屑

文章目录