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},},4. 總結
?都是自己做項目的經驗，制作不易，如果可以幫助到你，點個關注再走吧謝謝
_csdn)
)
