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`属性传递参数,参数的值必须是字符串类型。