最近协助前端写vue页面时，需要几个传参问题随之记录下
1、上个页面js跳转页面传参
<el-button class="btn" @click="goDetail">查看详情</el-button>
//跳转详情页
function goDetail(id) {
router.push({
peth: `/finance/detail/${id}`,
});
}
路由需修改成地址后跟冒号+id，即 :id
{
path: "/finance/detail/:id",
component: () => import("@/views/association/web/finance/detail"),
name: "financeDetail",
hidden: true,
meta: {
title: "金融专题详情",
breadcrumbHidden: true,
isAccept: true,
platform: 1,
},
},
跳转过来的页面内容，接受参数形式
<script setup>
const route = useRoute();
const financeId = route.params.financeId
</script>
2、 跳转之前的页面标签定义内容，地址后跟问号加参数，如下
<div class="more" @click="router.push('/industryServe?ServiceType='+'Financial')">更多</div>
路由不需要特殊处理，即不加冒号和id
{
path: "/industryServe",
component: () => import("@/views/association/web/industryServe/index"),
name: "industryServe",
hidden: true,
meta: {
title: "产业服务",
breadcrumbHidden: true,
isAccept: true,
platform: 6,
},
},
跳转过来后的页面接受参数，如下
const params = ref({
PageIndex: 1,
PageSize: 10,
ServiceType: route.query.ServiceType,
KeyWords: "",
});
总结如下：
当定义地址后加冒号和参数时，接受参数页面使用params
而定义地址后加问号和参数时，接受参数页面使用query
