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