el-table をクリックして詳細ページにジャンプする 2 つの方法

ジャンプを記述する 2 つの方法:

1. キープアライブを使用してコンポーネントをキャッシュし、更新中のパラメータの損失を防ぎます。

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: ''
      }
    }]
  },

el-table をクリックして詳細ページにジャンプする 2 つの方法

おすすめ