跳轉(zhuǎn)的兩種寫法:

1.使用keep-alive使組件緩存,防止刷新時(shí)參數(shù)丟失

keep-alive 組件用于緩存和保持組件的狀態(tài)，而不是路由參數(shù)。它可以在組件切換時(shí)保留組件的狀態(tài)，從而避免重新渲染和加載數(shù)據(jù)。 keep-alive 主要用于提高頁面性能和用戶體驗(yàn)，而不涉及路由參數(shù)的傳遞和保留。這里使用 <keep-alive> 組件是為了在刷新頁面時(shí)保持之前傳遞的參數(shù)，確保頁面能夠正確地顯示之前的狀態(tài), 其實(shí)使用params更合適

<el-tablesize="mini":data="tableData"borderstyle="width: 100%":max-height="maxHeight"><el-table-column prop="stationName" label="站點(diǎn)名稱"><template slot-scope="scope"><keep-alive><spanclass="goDetail"v-hasPermi="['station:detail']"@click="go2Detail(scope.row)">{{ scope.row.stationName }}</span></keep-alive></template></el-table-column>
<el-table>

methods: {
// 跳轉(zhuǎn)到詳情頁面go2Detail(row) {this.$router.push({path: "/site/siteDetail",query: {row}});},}

2.使用router-link , 使用 <router-link> 進(jìn)行頁面跳轉(zhuǎn)時(shí)，刷新頁面不會(huì)丟失攜帶的參數(shù)。這是因?yàn)?<router-link> 在進(jìn)行路由導(dǎo)航時(shí)，會(huì)將參數(shù)作為路由的一部分，并在刷新頁面時(shí)將這些參數(shù)保留下來。

<el-table-column label="標(biāo)準(zhǔn)名稱" align="center" :show-overflow-tooltip="false"><template slot-scope="scope"><router-link :to="'/water/standard/limit/' + scope.row.id" class="link-type"><span>{{ scope.row.standardName }}</span></router-link></template>
</el-table-column>

?需要在router/index.js中配置路由

  {path: '/water',component: Layout,hidden: true,children: [{path: 'standard/limit/:standardId',component: (resolve) => require(['@/views/water/standard/limit'], resolve),name: 'Limit',meta: {title: '標(biāo)準(zhǔn)詳情',icon: ''}}]},