1. 应用场景：

点击历史记录，要比较两个tab页的内容时，需要做到切换tab页来回看左右对数据对比。

2.开发难点

若依项目正常是把路由配置到菜单管理里，都是设定好的。不过它也给我们写好了动态新增tab页的方，需要我们自己来实现

3.实现方式

1.首先在utils/index.js里添加以下代码

// 动态路由管理
export function addDynamicRoute(router, routeConfig) {console.log(router,'router');const { name, path, component, title } = routeConfig; // 移除了parentPath，因为动态路由将直接作为Layout的子路由// Vue Router 3.x 使用 router.options.routes 来查找现有路由const routeExists = router.options.routes.some(route => {// 检查顶级路由或其children中是否存在相同name的路由if (route.name === name) return true;if (route.children) {return route.children.some(child => child.name === name);}return false;});if (routeExists) {console.warn(`Route with name '${name}' already exists. Skipping addition.`);return null; // 表示没有添加新路由}// 创建动态路由，包装在Layout中const dynamicRoute = {path: path,component: () => import('@/platformLayout'), // 使用Layout作为父组件children: [{path: '', // 空路径，表示匹配父路径 /crm/quotation/snapshot/:snapshotIdname: name,component: component, // 这将是 snapshotComponent 包装器meta: {title: title,noCache: true // 不缓存，确保每次都能加载最新数据}}]};// 添加到路由 - Vue Router 3.x 使用 addRoutesrouter.addRoutes([dynamicRoute]);return dynamicRoute;
}// 生成唯一的路由名称
export function generateRouteName(snapshotName, snapshotId) {return `snapshot_${snapshotId}_${Date.now()}`;
}// 生成快照路由路径
export function generateSnapshotPath(snapshotId) {return `/crm/quotation/snapshot/${snapshotId}`;
}

2.接着我们查看plugins/tab.js文件。若依已经为我们写好了添加tab页签的方法

  // 添加tab页签openPage(title, url, params) {var obj = { path: url, meta: { title: title } }store.dispatch('tagsView/addView', obj);return router.push({ path: url, query: params });},

3. 在需要创建新的页面的方法中使用

第一步:引入我们需要的方法

import { addDynamicRoute, generateRouteName, generateSnapshotPath } from '@/utils/index';
import tab from '@/plugins/tab';

第二步：在用到的方法里实现

注：import('./preSale.vue') 因为是要比较两个页面，所以页面是一样的，我们直接复用当前页面。

detailObj 是我这个页面需要用到的参数 historyId是记录当前tab页面用的，因为路由跳转回去之后默认是跳转到首页。 routeName是生成路由的name; snapshotId为了生成生成唯一的路由名称以及拼接路由query参数 title: `历史快照-${snapshotName}`, 可以写自己要生成路由的名字parentPath: '/crm/quotation' 是路由前缀路径

   // 创建快照路由querySnapshot(val) {const detailObj = this.options.find(item => item.value == val);this.openSnapshotRoute(detailObj);}, openSnapshotRoute(snapshotData) {const snapshotId = snapshotData.snapId;const snapshotName = snapshotData.snapName;const routeName = generateRouteName(snapshotName, snapshotId);const routePath = generateSnapshotPath(snapshotId);// 创建快照组件const snapshotComponent = {template: `<div class="snapshot-view"><preSale :value="true":row.sync="snapshotData"type='1':historyDisabled="true"@input="handleClose"       /></div>`,data() {return {snapshotData: snapshotData}},methods: {handleClose() {   this.$router.go(-1);}},mounted() {console.log(this.snapshotData);},components: {'preSale': () => import('./preSale.vue')}};// 添加动态路由addDynamicRoute(this.$router, {name: routeName,path: routePath,component: snapshotComponent,title: `历史快照-${snapshotName}`,parentPath: '/crm/quotation'});// 跳转到新路由并创建tab页面tab.openPage(`历史快照-${snapshotName}`, routePath, { snapshotId: snapshotId, historyId: this.historyId });},

4.效果展示

5. 实现历史缓存tab的方法

1.既然点击tab默认打开的是首页index页面。那么就在index页面使用路由守卫的方法来监听上一个路由传过来的值

2 实现方式

data(){
return{
}
}，beforeRouteEnter(to,from,next){if (from.query.historyId) {next(vm => {getDetailPre(from.query.historyId).then((response) => {vm.preSaleData = response.data;vm.opportunityOptions = [vm.preSaleData].map(item=>{return{...item,value:item.opportunityId,label:item.opportunityName}});});vm.preSaleVisable = true;})}else{next()}},

3. 重要的一点

需要在跳转后的页面监听传过来的值, 不然值赋值不上去

 watch: {row: {handler(newVal) {console.log(newVal);this.localRow = { ...newVal };this.localJsonRow = JSON.parse(JSON.stringify(newVal));this.localRow.exchange = newVal.exchange !== null ? newVal.exchange + '%' : '';},deep: true,immediate: true},'row.id': {handler(newVal) {this.getSnapshotPre(newVal);},deep: true,},historyDisabled: {handler(newVal) {this.disabled = newVal;this.operate = !newVal;},deep: true,immediate: true},},