在Vue中，你可以使用路由参数来在不同页面之间传递数据。路由参数可以通过URL的方式传递，也可以通过查询参数传递。
1. 使用URL参数传递数据：
URL参数通常用于在路由路径中传递数据，它是一种非常直观和常用的传参方式。
在定义路由时，你可以在路由路径中使用动态片段（dynamic segment）来指定参数的位置。动态片段使用冒号开头，例如`/:id`表示参数`id`是一个动态片段，它会匹配任意值。
在组件中，你可以通过`$route.params`来访问URL参数。
```javascript
// main.jsimport Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import UserInfo from './components/UserInfo.vue';
import UserProfile from './components/UserProfile.vue';Vue.use(VueRouter);
const routes = [
{ path: '/user-info/:id', component: UserInfo },
{ path: '/user-profile/:username', component: UserProfile },
];const router = new VueRouter({
routes,
});new Vue({
render: h => h(App),
router,
}).$mount('#app');
```
在上面的例子中，我们定义了两个路由，分别是`/user-info/:id`和`/user-profile/:username`。`:id`和`:username`是动态片段，它们会匹配实际的值。
在组件中，可以通过`this.$route.params`来访问传递的参数。
```vue
<!-- UserInfo.vue -->
<template>
<div>
<h1>User Information Page</h1>
<p>User ID: { { $route.params.id }}</p>
</div>
</template>
```
2. 使用查询参数传递数据：
查询参数通常用于在URL后面添加一些额外的参数，以`key=value`的形式传递数据。查询参数使用`?`符号来开始，并且每个参数使用`&`符号分隔。
在组件中，你可以通过`$route.query`来访问查询参数。
```javascript
// main.js// ...（之前的代码）
const routes = [
// ...（之前的路由配置）
{ path: '/user-info', component: UserInfo },
];const router = new VueRouter({
routes,
});new Vue({
render: h => h(App),
router,
}).$mount('#app');
```
在上面的例子中，我们定义了一个路由`/user-info`，没有动态片段。
在组件中，可以通过`this.$route.query`来访问查询参数。
```vue
<!-- UserInfo.vue -->
<template>
<div>
<h1>User Information Page</h1>
<p>User ID: { { $route.query.id }}</p>
<p>Username: { { $route.query.username }}</p>
</div>
</template>
```
对于使用查询参数传递数据，你需要在URL中手动添加查询参数，例如`/user-info?id=123&username=johndoe`。这样，组件中的`$route.query`就可以访问到传递的参数值。
总结：在Vue中，你可以通过URL参数和查询参数来实现路由传参。使用URL参数可以将参数信息直接编码在URL中，而使用查询参数则更适合传递一些额外的配置信息。根据你的需求选择合适的传参方式即可。