学习使用vue-router tab切换（六）

原文地址：https://bhuh12.github.io/vue-router-tab/zh/guide/meta/solutions.html

解决方案

Vue Router Tab 实现过程中遇到的问题及解决方案，也欢迎提出更好的点子。

1. 相同路由需要根据 route.params 或 route.query 不同，根据规则生成不同的缓存：

   <router-view> 添加 key 属性，根据 key 不同生成不同的实例。

2. 通过 <keep-alive> 组件实例，精准控制缓存：

   1. 获取 <keep-alive> 实例：

      在 <transition> 过渡组件包裹下，通过 this._vnode.children[0].child._vnode.componentInstance 获取 <keep-alive> 组件实例。

   2. 匹配并移除缓存：

      1. 根据缓存 $alive.cache[i].data.key 来匹配缓存。

      2. 销毁当前缓存组件实例：$alive.cache[key].componentInstance.$destroy()。

      3. 从 $alive.keys 数组中移除当前 key。

3. 页面组件强制刷新：

   1. 移除当前页面组件缓存。

   2. router-view 组件通过 v-if 隐藏，在过渡效果结束或 nextTick 后再显示。

4. 获取当前组件所在的路由深度：

   递归查找最近的拥有 $vnode.data.routerViewDepth 的父组件的对应值。

5. 嵌套路由 <router-view> 的 key，如果直接从 $route 中获取，子路由切换时会生成不同缓存：

   应该从 $route.matched 中匹配当前嵌套深度所在路由的 path。

6. 打开开启缓存的嵌套路由的一个子路由页面 a，然后访问其他路由页面，再直接访问嵌套路由的另一个子路由页面 b，此时展示的依然是 a，与路由地址不匹配

   通过 activated 钩子，页面组件执行 $forceUpdate 强制更新。

   副作用：子路由页面 a 仍会触发 activated 钩子

7. iframe 页面页签切换后会重新加载：

   1. 将 <iframe> 节点放在页面所在 <router-view> 的外层，通过 v-show 控制显示隐藏。

   2. 建立 iframe 路由页面组件，通过生命周期钩子来添加、显示、隐藏、移除 <iframe> dom 节点。

8. 打包后的 js 文件太庞大：

   构建库时，配置 babel.config.js 中 useBuiltIns 为 false，打包时不包含 Polyfill。

   常见问题

   #📣 RouterTab 不支持多层嵌套路由生成页签 (issues 32 (opens new window))

   RouterTab 控件是有意设计成这样的，只有包含 RouterTab 组件的路由的直接子路由才参与生成页签页面，再嵌套的下级路由跟 Vue Router 中一样展现。

   试想一下，一个页签页面内部还有子页签控制页面展示，并且子页签也需要响应路由，这种场景是必须嵌套路由支持的。

   所有的页签路由都直接放在同一层会很杂乱，我们可以使用 ... 展开运算符，将不同模块的路由配置合并引入：

   // RouterTab 内置路由
   import { RouterTabRoutes } from 'vue-router-tab'
   
   const news = [{...}]
   const product = [{...}]
   
   const routes = [
     {
       path: '/',
       component: Frame,
       children: [
         ...RouterTabRoutes,
         ...news,
         ...product,
       ]
     }
   ]

   移除 RouterTab

   相对于单页应用，多页签框架为用户同时处理多个业务时的跨页操作带来了更好的体验，但这也使得我们要处理更多的页面交互场景，代码相对会更加复杂。

   如果你的项目不再需要使用 RouterTab，你可以通过下面的步骤来移除 RouterTab。

   #一、替换 this.$tabs 调用

   批量查找 $tabs 全局调用，参考下表使用替换方案。

   方法	说明	替换方案
   $tabs.open	全新打开页签	$router.push(path)
   $tabs.close	关闭页签并跳转新页面	$router.replace(path)
   $tabs.refresh $tabs.refreshAll	刷新页签	组件内部提供刷新数据方法
   $tabs.reset	重置页签，回到默认或指定页	$router.replace(path)
   $tabs.openIframe $tabs.closeIframe $tabs.refreshIframe	iframe 页签相关方法	需要添加全局 iframe 路由用于嵌入页面，并封装方法用于操作 iframe 页面
   beforePageLeave	页面离开确认	beforeRouteLeave(to, from, next) 参考：Vue-Router 组件内的守卫(opens new window)

   #二、去除 <router-tab> 组件

   1. 使用 <router-view> 替换布局框架组件内的 <router-tab>

   2. 参考 入门 说明移除相关代码：

      1. 入口文件移除 RouterTab 安装代码

      2. 路由配置文件移除 RouterTab 内置路由和页签相关配置

   3. 移除 RouterTab 依赖

      推荐使用 yarn：

      yarn remove vue-router-tab
      

      1
      

      你也可以用 npm：

      npm uninstall vue-router-tab
      

      1
      

   #三、调整页面交互方式

   使用单页方式，意味着不再支持跨页操作

   你需要将原来切换页签操作的流程，更改为单页内部的操作，可以使用例如弹窗、抽屉、子页面等交互方式。