# 解决方案
Vue Router Tab 实现过程中遇到的问题及解决方案,也欢迎提出更好的点子。
相同路由需要根据
route.params
或route.query
不同,根据规则生成不同的缓存:<router-view>
添加key
属性,根据key
不同生成不同的实例。通过
<keep-alive>
组件实例,精准控制缓存:获取
<keep-alive>
实例:在
<transition>
过渡组件包裹下,通过this._vnode.children[0].child._vnode.componentInstance
获取<keep-alive>
组件实例。匹配并移除缓存:
根据缓存
$alive.cache[i].data.key
来匹配缓存。销毁当前缓存组件实例:
$alive.cache[key].componentInstance.$destroy()
。从
$alive.keys
数组中移除当前key
。
页面组件强制刷新:
移除当前页面组件缓存。
router-view
组件通过v-if
隐藏,在过渡效果结束或nextTick
后再显示。
获取当前组件所在的路由深度:
递归查找最近的拥有
$vnode.data.routerViewDepth
的父组件的对应值。嵌套路由
<router-view>
的key
,如果直接从$route
中获取,子路由切换时会生成不同缓存:应该从
$route.matched
中匹配当前嵌套深度所在路由的path
。打开开启缓存的嵌套路由的一个子路由页面 a,然后访问其他路由页面,再直接访问嵌套路由的另一个子路由页面 b,此时展示的依然是 a,与路由地址不匹配
通过
activated
钩子,页面组件执行$forceUpdate
强制更新。副作用:子路由页面 a 仍会触发
activated
钩子iframe 页面页签切换后会重新加载:
将
<iframe>
节点放在页面所在<router-view>
的外层,通过v-show
控制显示隐藏。建立 iframe 路由页面组件,通过生命周期钩子来添加、显示、隐藏、移除
<iframe>
dom 节点。
打包后的 js 文件太庞大:
构建库时,配置
babel.config.js
中useBuiltIns
为false
,打包时不包含 Polyfill。