vue3中页面传参汇总

最近协助前端写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