这是一篇枯燥的笔记，很可能最后还没有demo demo地址。
Tabs标签页大家应该很熟悉了，特别是在jQuery盛行时代，内容可以高效地集中。如果使用vue这种自身就偏单页应用的框架，如何实现tabs动态加载所需页面呢？
以下是我在实现过程中遇到的问题，供参考。
1. 核心方法是什么?
在Vue内置组件中，有个名叫component的组件，提供:is属性用于决定渲染目标，并提供了keep-alive指令把切换过的组件保留到内存中，避免重新渲染。
参考：https://cn.vuejs.org/v2/guide/components.html#动态组件
<keep-alive>
<component :is="currentTab"></component>
</keep-alive>2.路由怎么控制?
由于是vue+tabs（SPA中的SPA）, vue-router之类的基本用不上了，直接在母页上导入组件，注册到components上供动态调用即可。
import page1 from './page1.vue'
import page2 from './page2.vue'
... ...
components: {
page1,page2
}
3.数据结构怎样设计?
我的需求是tabs从一个菜单(可能包含二级菜单)点击生成，默认有一个tab永不关闭，其余每个tab可关闭和单独刷新等等。我的做法是建两个数组(或对象)：一个存储固定的菜单数据，另一个空数组，存储用户添加的tab数据。注意vue中监听对象或数组变化有坑。这里涉及具体逻辑，就不啰嗦了，有兴趣可以看看源码。
4.每个tab单独刷新问题
vue2新增了activated、deactivated等生命周期钩子(不理解为什么要取‘钩子’这么奇怪的名字)，用于监听keep-alive状态。
这样就可以监听每个tab获得焦点或者失焦状态，以便知道在什么时候执行父组件传过来的命令(如关闭和刷新)。
有了事件触发机制，现在就差知道到底执行什么命令了，我给component添加了自定义属性:refresh,当达到刷新条件时，通过props传给子组件，子组件得到refresh进行判断，决定是否刷新(刷新不要location.reload,这会让整个web刷新,要根据子页面逻辑重新初始化数据和请求接口。这方法比较笨拙，但我没发现官方api提供了想关方法，希望你有更好的处理方式)。
5.在tab中打开新tab
vue2虽然废除了$dispatch 和 $broadcast，但为组件间的通信提供了v-on和$emit，子组件触发$emit，在父组件中可用v-on监听到。更复杂的组件间通信，就需要使用vuex了。
热门文章
- 微信小程序“拍照识图”上线(63,758)
- YouTube评论翻译插件《油管评论翻译机》上线了(60,288)
- 基金助手--chrome浏览器插件(45,193)
- 拍照识别彩票结果在线工具(31,943)
- vue+tabs动态组件方案漫谈(26,477)
- 《油管评论翻译机》使用说明书(25,337)
- 网页打印插件Print.js(23,978)
- 自用YouTube抓取评论+翻译工具(23,380)
- YouTube评论导出免费在线工具(18,054)
- px转rem/vw方法小结(17,565)
大哥，方便加联系方式咨询您个问题吗？
大哥，我改了你的代码，你的默认展示首页不可关闭我改成可关闭后，为啥tabs关闭了。页面上还展示首页上的内容呢？
5年前的代码了，需要看你的代码是写的，可以邮件联系jie4038[AT]qq.com
大哥，我给你发邮箱啦，不知道你有没有收到。
大佬 你好 我想问一下结合路由使用呢？
看看这个是你要的吗：https://github.com/monster1935/vue-admin
谢谢大佬
关闭当前tab的时候，怎么让currentTab切换成前一个
如果你看过源码就会知道，tabItems即打开的tab，而currentTab即为当前显示的tab。遍历tabItems找出最后一个值，赋给currentTab即可。我之前统一设置currentTab为第1个。
你可以在closeTab()相应位置加上：
let lastItem;
for(let i in this.tabItems){
if(this.tabItems[i].label){
lastItem=i;
}
}
this.currentTab = lastItem;
demo和源码怎么看呢
地址已修复，谢谢提醒。