vue3实现单页面多标签页

百变鹏仔 2个月前 (10-31) #前端问答

文章标签页面

在现在的互联网时代，用户的使用习惯不断变化着。与此同时，技术也在不断更新。在前端技术领域中，vue.js作为目前最为流行的前端框架之一，其三版本vue3于2020年9月份正式发布。vue3相比于vue2的更新迭代，功能和性能都得到了大幅的提升，其中最为值得一提的就是其支持多标签页。本文就来探究一下vue3实现单页面多标签页功能的实践过程。

一、前置知识

在深入介绍Vue3实现多标签页功能之前，需要对Vue3的几个基本概念有所了解：

1.路由(route)

路由是前端中非常重要的一个概念，它负责管理着浏览器的URL和页面之间的关系。在Vue中，我们可以通过Vue Router来实现路由的跳转。

2.组件(Component)

Vue3是以组件化开发为基础的框架，将一个大的应用程序拆分成一个一个的组件，每个组件都可以重复使用，提高了代码的复用率和维护性。

3.状态管理(State Management)

状态管理指的是将应用程序中的状态集中存储、管理和协调。在Vue中，我们使用Vuex来实现状态管理。

立即学习“前端免费学习笔记（深入）”；

二、实现过程

下面将介绍如何使用Vue3和Vue Router来实现单页面多标签页的功能。具体实现可分为以下步骤：

1.安装Vue Router

Vue Router是Vue.js官方的路由管理库，可以方便地实现单页面应用程序的路由跳转和管理。通过npm安装Vue Router：

npm install vue-router --save

2.配置路由

在Vue3中，配置路由相比Vue2有所变化。我们需要在createApp方法中配置路由：

//导入Vue Router import { createRouter, createWebHashHistory } from 'vue-router' //创建路由 const router = createRouter({   history: createWebHashHistory(),   routes: routes }) //创建Vue App const app = createApp(App) //挂载路由 app.use(router).mount('#app')

其中，createWebHashHistory()是指定使用哈希值来实现路由跳转，routes是路由的配置项。我们在routes中定义每个标签页的路由，如下所示：

const routes = [   { path: '/', component: Home, name: 'home', meta: { title: '主页' } },   { path: '/about', component: About, name: 'about', meta: { title: '关于' } },   { path: '/contact', component: Contact, name: 'contact', meta: { title: '联系我们' } } ]

在这里路由中，我们定义了三个标签页，分别是主页(home)、关于(about)和联系我们(contact)。

3.创建标签页组件

接下来，我们需要创建标签页组件。在Vue3中，组件的定义相比Vue2有所变化。我们需要使用defineComponent方法来定义组件：

import { defineComponent } from 'vue' export default defineComponent({   name: 'Home',   setup() {       return {}   },   render() {       return (           <div>                 这是主页             </div>       )   } })

结合上文路由中定义的标签页，我们可以在render函数中渲染出对应的组件。

4.增加标签页

下面，我们需要为应用程序增加标签页功能。我们可以使用一个数组来存储打开的标签页，每个数组元素表示一个标签页的信息：

tabs: [    { title: '主页', name: 'home', path: '/', isCurrent: true },    { title: '关于', name: 'about', path: '/about', isCurrent: false },    { title: '联系我们', name: 'contact', path: '/contact', isCurrent: false } ]

其中，title表示标签页的标题，name表示标签页的名称，path表示标签页对应的路由路径，isCurrent表示当前标签页是否被选中。

接下来，我们需要实现标签页的打开功能。当点击菜单中的某个选项时，我们需要先判断对应的路由是否已经存在于标签页数组中。如果已经存在，就将当前标签页设为选中状态，否则就新增一个标签页：

//打开标签页 openTab(tab) {     let routerName = this.$router.currentRoute.value.name      let t = this.tabs.find(x => x.name === tab.name)     if (!t) {       //不存在，新增标签页                this.tabs.push({ name: tab.name, title: tab.meta.title, path: tab.path, isCurrent: true })         } else {       //已存在，设为当前标签页              this.tabs.forEach(x => x.isCurrent = false)              t.isCurrent = true              this.$router.push(t.path)     }  }

5.关闭标签页

最后，我们还需要实现标签页的关闭功能。当点击标签页上的关闭按钮时，我们需要将该标签页从数组中删除，同时将当前标签页设为上一个标签页：

//关闭标签页 closeTab(tab) {         let i = this.tabs.findIndex(x => x.name === tab.name)         this.tabs.splice(i, 1)         let currentTab = this.tabs.find(x => x.isCurrent === true)         if (currentTab) {                this.$router.push(currentTab.path)         }  else {                this.$router.push('/')         }  }

三、总结

通过本文的介绍，我们了解了Vue3实现单页面多标签页功能的基本思路和具体实现过程。Vue3相比Vue2在使用上有所变化，需要根据实际需求做出相应的调整，但其支持多标签页的优点仍然不言而喻。对于那些需要在Web应用程序中实现多页面功能的开发者来说，Vue3的出现为我们提供了一种良好的解决方案。

文章推荐