跳轉的兩種寫法:

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

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

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

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

2.使用router-link , 使用 <router-link> 進行頁面跳轉時，刷新頁面不會丟失攜帶的參數。這是因為 <router-link> 在進行路由導航時，會將參數作為路由的一部分，并在刷新頁面時將這些參數保留下來。

<el-table-column label="標準名稱" 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: '標準詳情',
        icon: ''
      }
    }]
  },