应用系统中需要运用到多标签页，跟浏览器一样的效果，在新打开页面后，动态追加一个页签，点击页签可以切换系统主页面区域的内容，且保持内容不刷新，如果关闭页签再通过菜单打开，重新加载。jQuery年代的解决方案就是ifream,但是在Vue.js的单页面应用中，都是组件化开发了，实现多标签页解决的问题就聚焦在关于组件实例的缓存和销毁，下边讲述两种实现多标签页系统的技术实现方案。
Vue Router是官方的路由管理器，跟Vue.js深度集成，确实很强，更多的功能不意义阐述，详情请参考 Vue Router 官方文档
当我们跳转一个新的路由时，可能是点击菜单，也可能是点击发生跳转，这时候路由会发生切换，我们都希望打开一个新的页签，并且这个页签并处于激活状态，当打开多个时，可以切换页签的激活状态，同时路由组件区域（页面内容）发生变化，始终展示激活页签对应的内容。
一个组件展示所有的标签页，并标识出来哪个是激活状态，标签页数据需要在菜单等地方实现追加，我们优先选择数据存在Vuex中，由标签页组件实现切换激活标签和删除标签，添加标签页也可以在该组件内实现，需要对路由进行监听，路由发生调用Vuex中的增加函数，函数对路由数据进行过滤，这样就可以实现路由变化时，标签页数据的变化。
在<router-view/>外层包裹 <keep-alive>具体原理参考 在动态组件上使用 keep-alive
这个时候，在你切换渲染不同路由的时候，确实好使，组件的状态数据、表单填写的内容等也会被缓存，好像这么简单都直接解决了，当然不可能，这么简单就没必要写这篇文章。
当你更改路由参数的时候，你会发现参数变化的时候，不太好使了，会把之前缓存的这个组件销毁重新加载， 一个组件只能被缓存一个 ，我们希望的肯定是参数不一样时，应该分开都缓存，比如一些明细页面，我们需要看多个客户、多个工单，不应该每次切换都是在重新加载。
关闭页签时，我们更换路由，实现跳转，当再次访问这个路由时，组件未重新加载，这个就不符合正常的使用习惯，关闭页签就应该啥都没了，所以缓存啥的应该都没了。
组件有没有缓存可以通过DevTools调试查看
这样看起来，好像才是真的解决了所有的问题，但是还是有bug，有瑕疵， 解决方案2 中提到的一大堆过程的前提是 destroy ,只有组件进入 destroy 才满足 解决方案2 的方法，但是如果页签没有激活，keep-alive中就已经是停用了这个组件，关闭页签时，路由是没有变化的，keep-alive对各个组件也并没有发生启用和停用，只是改变了Vuex中 visitedViews 的数据，所以关键问题是只要 visitedViews 发生变化，需要把减少的那个组件给卸载掉。
至此，卸载这个活儿终于完成了，无论是怎么关闭页签，都可以完成组件的卸载，切换页签不卸载。感觉完美无瑕，可现实总是那么残酷，关闭页签后，再打开，切换页签时，这个组件 居然刷新了 ，明明关闭前，切换是不刷新的，关闭再打开后，就会刷新了，难道不会缓存了？看一下DevTools调试，懵了。。。
<keep-alive> 添加 include ，Vuex获取当前打开页签的组件名（如：visitedName），include=visitedName；针对传参数的页面，添加 watch ，监听Vuex中标签页的变化，当有变化时判断是否包含当前组件，没有时卸载当前组件，当组件不需要传参时可以不添加watch，include不缓存时组件将会被卸载。
注意： 页面组件必须写name，声明组件名称
如果你是是使用Vue-cli开发的话，在浏览器调试时 发现 标签后面跟着 <div data-data="2143543">类似这个字符串的话，这个只是vue热更新用的，不需要理会打包时不会打包进去。只是用作开发的过程中 你改变代码，在浏览器中不需要刷新页面，就可以改变dom结构解决这个问题的方法如下：
1、双击打开HBuilder工具，新建静态页面vhtml.html，并引入vue.js文件。
2、在<body></body>标签元素插入一个div和input输入框标签，添加v-model和v-html指令。
3、在<div></div>标签下方插入<script></script>，并在这个标签初始化vue组件函数。
4、保存代码并在浏览器中预览该界面，可以查看到浏览器控制台报错了。
5、最后修改v-html指令和v-model指令绑定的数据变量，然后保存代码，这样问题就解决了。
