vue3+Typescript实现路由标签页和面包屑功能

vue3面包屑 vue3路由标签页 2023-05-19 06:05:16 768人浏览安东尼

摘要

目录在Vue中实现路由标签页和面包屑需求分析最终效果实现步骤第一步：创建路由标签组件和面包屑第二步：创建路由标签数组第三步：监听路由变化并自动添加新标签第四步：处理关闭标签事件第五步

在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面包屑内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue3+Typescript实现路由标签页和面包屑功能

本文链接: https://www.lsjlt.com/news/212573.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341