Vue如何实现TagsView多页签导航功能？

本文共计3349个文字，预计阅读时间需要14分钟。

目录+前言+一、效果图+二、实现思路+1. 新建 tags-view.js 文件+2. 在 Vuex 中引入 tags-view.js+3. 新建 tabsView 组件+4. 新建 ScrollPane 组件+5. 引入 tabsView 组件+6. 使用 keep-alive 组件，进行页面标签的缓存+总结

目录

• 前言
• 一、效果图
• 二、实现思路
• 1. 新建 tags-view.js
• 2. 在Vuex里面引入 tags-view.js
• 3. 新建 tabsView 组件
• 4. 新建 ScrollPane 组件
• 5. 引入 tabsView 组件
• 6. 使用 keep-alive 组件，进行页签的缓存
• 总结

前言

基本上后台管理系统都需要有多页签的功能，但是因为一些脚手架项目基本都把这个功能给集成好了，导致在学习或者修改的时候不知道该如何下手。今天这篇文章就来聊一聊，vue-element-admin项目是如何实现多页签功能的。

一、效果图

实现之后的效果如下图所示，点击左边的不同的菜单会打开多个页签，并且右键页签可以操作关闭页签。

二、实现思路

利用Vue的内置组件keepalive和routeLink解决，数据是通过vuex进行管理。