el-table中点击跳转到详情页的两种方法

跳转的两种写法:

1.使用keep-alive使组件缓存,防止刷新时参数丢失

keep-alive 组件用于缓存和保持组件的状态,而不是路由参数。它可以在组件切换时保留组件的状态,从而避免重新渲染和加载数据。 keep-alive 主要用于提高页面性能和用户体验,而不涉及路由参数的传递和保留。这里使用 <keep-alive> 组件是为了在刷新页面时保持之前传递的参数,确保页面能够正确地显示之前的状态, 其实使用params更合适

html 复制代码
<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>
javascript 复制代码
methods: {
// 跳转到详情页面
    go2Detail(row) {
      this.$router.push({
        path: "/site/siteDetail",
        query: {
          row
        }
      });
    },
 }

2.使用router-link , 使用 <router-link> 进行页面跳转时,刷新页面不会丢失携带的参数。这是因为 <router-link> 在进行路由导航时,会将参数作为路由的一部分,并在刷新页面时将这些参数保留下来。

html 复制代码
<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中配置路由

javascript 复制代码
  {
    path: '/water',
    component: Layout,
    hidden: true,
    children: [{
      path: 'standard/limit/:standardId',
      component: (resolve) => require(['@/views/water/standard/limit'], resolve),
      name: 'Limit',
      meta: {
        title: '标准详情',
        icon: ''
      }
    }]
  },
相关推荐
小曲曲35 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder7 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。7 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js