vue3 路由跳转传递参数
在 Vue 3 中，你可以通过路由参数来传递数据。下面是一个示例，展示如何在路由跳转时传递参数：
1. 在 Vue 3 中使用`<router-link>`组件来创建链接，通过`v-bind`属性可以将参数传递给路由。
```vue
<router-link :to="{ path: '/example', query: { param1: 'value1' }}" >跳转到 Example</router-link>
```
2. 在目标组件中通过`$route.query`获取传递的参数。
```vue
<template>
  <div>
    <h1>传递的参数：{{ $route.query.param1 }}</h1>
  </div>
</template>
<script>
export default {
  name: 'Example',
};
</script>
```react router路由传参
在上述示例中，通过`<router-link>`组件的`query`属性将参数`param1`及其值`value1`传递给路由。在目标组件中，使用`$route.query`来获取传递的参数。
另外，你还可以通过`params`属性来传递路由参数，它会将参数添加到路由路径中。例如：
```vue
<router-link :to="{ path: '/example/:param1', params: { param1: 'value1' }}" >跳转到 Example</router-link>
```
在目标组件中，通过`$route.params`来获取传递的参数。
请根据你的需求选择适合的方式来传递参数。注意，如果是使用`params`属性传递参数，参数的值必须是字符串类型。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。