vue3接受路由跳转传参

在Vue 3中，可以使用`useRoute`和`useRouter`这两个API来接收路由跳转传参。首先，在要跳转的目标页面中，需要引入`useRoute` API。在组件中使用`const route = useRoute()`来获取当前路由的信息。通过`route.params`可以获取到路由传递的参数。例如，如果在路由跳转时使用了命名路由，并传递了一个名为`passValue`的参数，那么在目标页面中可以通过`route.params.passValue`来获取传递的参数值。另外，在目标页面中也可以使用`route.query`来获取通过query参数传递的值。

下面是一个示例，假设我们在路由跳转时使用了命名路由，并传递了一个名为`passValue`的参数：

// 在要跳转的页面引入API
import { useRouter, useRoute } from 'vue-router';

export default {
  setup() {
    // 获取路由实例
    const router = useRouter();
    // 获取当前路由信息
    const route = useRoute();

    // 获取参数值
    const passValue = route.params.passValue;

    // ...
    
    return {
      passValue
    };
  }
}

这样就可以在目标页面中通过`passValue`来获取传递的参数值了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3路由跳转and接收参数](https://blog.csdn.net/qq_58633408/article/details/126245193)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]