el-tab-pane不根据路由

### 动态管理 `el-tab-pane` 组件以防止不必要的重新渲染 为了确保 `el-tab-pane` 不会在关闭某个标签时触发其他打开标签内接口的重复调用，可以通过 Vue 的 `<keep-alive>` 组件来实现缓存功能。这允许浏览器保存已经加载过的组件实例而不必每次都重建它们。 对于基于路由的场景，在使用 Element UI 的 Tabs 和 Vue Router 结合的情况下，可以采用如下方法： #### 使用命名视图与嵌套路由配置 通过为每个 Tab 设置独立的子路径，并利用 Vue Router 提供的命名视图特性，可以让不同的 Tab 对应到各自的路由地址上。这样做的好处在于能够更精细地控制哪些页面应该被缓存以及如何处理导航逻辑。 ```javascript // router/index.js 中定义路由规则 { path: '/logs', component: LogTabs, children: [ { path: ':id', // 动态参数 :id 表示具体哪个日志记录 components: { default: LogDetail, // 默认显示的日志详情界面 logTabContent: () => import('@/components/LogTabContent') // 延迟加载对应的 Tab 内容 }, props: true, meta: { keepAlive: true } // 标记此路由下的组件需要保持活跃状态 } ] } ``` #### 应用 `keep-alive` 缓存特定组件 为了让某些特定条件满足时才启用缓存机制，可以在父级容器中包裹一层带有 include 属性的 `<keep-alive>` 标签。这里可以根据路由元信息 (`meta`) 来决定是否应用缓存策略。 ```html <!-- views/Logs.vue --> <template> <div class="log-tabs"> <el-tabs v-model="activeName" type="card" closable @tab-remove="removeTab"> <el-tab-pane v-for="(item, index) in editableTabs" :key="index" :label="item.title" :name="item.name" > <!-- 只有当当前激活项匹配指定名称才会生效 --> <router-view name="logTabContent"></router-view> </el-tab-pane> </el-tabs> <!-- 包裹整个区域以便于有条件地保留活动组件的状态 --> <transition name="fade-transform" mode="out-in"> <keep-alive :include="cachedViews"> <router-view></router-view> </keep-alive> </transition> </div> </template> <script> export default { data() { return { activeName: '', cachedViews: [], // 存储需要缓存的 view 名称列表 editableTabs: [] // 日志 tab 列表数据结构 [{title:'', name:''}] }; }, watch: { $route(to) { const toName = to.matched[0].components.logTabContent?.name; if (to.meta.keepAlive && !this.cachedViews.includes(toName)) { this.cachedViews.push(toName); } // 更新激活的 Tab this.activeName = to.params.id || ''; } }, created() { // 初始化默认选中的 Tab 或者根据 URL 参数设定初始值 this.$nextTick(() => { this.handleRoute(); }); }, methods: { handleRoute() { let id = this.$route.params.id; if (!id) { id = new Date().getTime(); // 如果没有传入 ID，则创建一个新的临时ID作为新Tab的名字 this.addTab(id); // 添加新的 Tab 并跳转至该位置 } this.activeName = String(id); }, addTab(targetName) { let newTabName = ++targetName + ''; this.editableTabs.push({ title: 'New Tab' + targetName, name: newTabName, content: 'New Tab Content' }); this.activeName = newTabName; // 跳转到新增加的 Tab 所对应的位置 this.$router.push({ path: `/logs/${newTabName}` }).catch(err => {}); }, removeTab(targetName) { let tabs = this.editableTabs; let activeName = this.activeName; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName) { let nextTab = tabs[index + 1] || tabs[index - 1]; if (nextTab) { activeName = nextTab.name; } } }); } this.activeName = activeName; this.editableTabs = tabs.filter(tab => tab.name !== targetName); // 移除不再使用的缓存 View this.cachedViews.splice( this.cachedViews.indexOf(this.$options.components.LogTabContent.name), 1 ); // 导航回剩余的第一个有效 Tab this.$router.replace(`/logs/${activeName}`).catch(err => {}); } } }; </script> ``` 上述代码实现了以下几点改进[^1]: - **按需加载**: 每个 Tab 的具体内容仅在其首次访问时加载； - **缓存支持**: 配置了 `keep-alive` 来避免频繁销毁和重建组件实例； - **平滑过渡**: 加入简单的 CSS 过渡效果提升用户体验感； - **历史追踪**: 当前激活的 Tab 将随用户的操作而变化并同步更新 URL 地址栏；