vue3 路由跳转传值

Vue3 中通过路由跳转传递参数的方法
在 Vue 3 应用程序中，可以通过 vue-router 使用命名视图和动态路由来实现携带参数的导航。为了完成这一操作，首先需要安装并配置 vue-router。
当涉及到具体的应用场景时，在组件内部可以利用 Composition API 来获取路由器实例，并调用其方法来进行带有参数的页面切换[^1]：
import { useRouter } from 'vue-router';

const router = useRouter();

function toPolicyPage() {
router.push({
name: 'PolicyConfig',
params: { policyId: 1101 }
});
}
登录后复制
上述代码展示了如何定义一个函数用于触发到名为 'PolicyConfig' 的路由跳转，同时附带了一个名为 policyId 的参数，该参数会被自动映射至目标路径中的相应占位符上[^2]。
对于接收端而言，则可以在对应的路由配置项里声明接受哪些 URL 参数作为 props 属性传入当前激活的组件内；也可以直接访问 $route.params 对象读取这些数据。
<!-- PolicyConfig.vue -->
<template>
<div>政策详情页 {{ $route.params.policyId }}</div>
</template>

<script setup>
// 或者使用setup语法糖配合useRoute hook 获取参数
import { useRoute } from "vue-router";

let route = useRoute();
console.log(route.params.policyId);
</script>
登录后复制