Two ways to write jumps:
1. Use keep-alive to cache components to prevent parameter loss during refresh
keep-alive
Components are used to cache and maintain the state of the component, not routing parameters. It preserves the state of a component when it switches, thus avoiding re-rendering and loading data.keep-alive
It is mainly used to improve page performance and user experience, and does not involve the delivery and retention of routing parameters. The component is used here<keep-alive>
to maintain the previously passed parameters when refreshing the page to ensure that the page can correctly display the previous state. In fact, it is more appropriate to use 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. When using router-link and using
<router-link>
to jump to the page, refreshing the page will not lose the parameters carried. This is because<router-link>
when navigating a route, the parameters are included as part of the route and are retained when the page is refreshed.
<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>
Routing needs to be configured in 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: ''
}
}]
},