路由传参的方式主要有两种：query传参和params传参。

1. Query 传参

首先，在路由配置文件中（通常是 router/index.ts），定义你的路由：

import { createRouter, createWebHistory } from 'vue-router';  
import Home from '../views/Home.vue';  
import Search from '../views/Search.vue';  const routes = [  {  path: '/',  name: 'Home',  component: Home  },  {  path: '/search',  name: 'Search',  component: Search  }  
];  const router = createRouter({  history: createWebHistory(process.env.BASE_URL),  routes  
});  export default router;

然后，在组件中导航到带查询参数的路由：

<template>  <button @click="goToSearch">Go to Search</button>  
</template>  <script lang="ts">  
import { defineComponent } from 'vue';  
import { useRouter } from 'vue-router';  export default defineComponent({  setup() {  const router = useRouter();  const goToSearch = () => {  router.push({ name: 'Search', query: { keyword: 'vue3' } });  };  return { goToSearch };  },  
});  
</script>

在目标组件 Search.vue 中接收查询参数：

<template>  <div>  <p>Search for: {{ searchKeyword }}</p>  </div>  
</template>  <script lang="ts">  
import { defineComponent, computed } from 'vue';  
import { useRoute } from 'vue-router';  export default defineComponent({  setup() {  const route = useRoute();  const searchKeyword = computed(() => route.query.keyword);  return { searchKeyword };  },  
});  
</script>

2. Params 传参

在路由配置中，你需要为 params 预留位置：

const routes = [  // ...其他路由  {  path: '/user/:id',  name: 'User',  component: User  }  
];

导航到带参数的路由：

<template>  <button @click="goToUser">Go to User</button>  
</template>  <script lang="ts">  
import { defineComponent } from 'vue';  
import { useRouter } from 'vue-router';  export default defineComponent({  setup() {  const router = useRouter();  const goToUser = () => {  router.push({ name: 'User', params: { id: 123 } });  };  return { goToUser };  },  
});  
</script>

在目标组件 User.vue 中接收参数：

<template>  <div>  <p>User ID: {{ userId }}</p>  </div>  
</template>  <script lang="ts">  
import { defineComponent, computed } from 'vue';  
import { useRoute } from 'vue-router';  export default defineComponent({  setup() {  const route = useRoute();  const userId = computed(() => route.params.id);  return { userId };  },  
});  
</script>

注意:  使用 params 传参时，路径中的参数部分是必须的，并且刷新页面后参数不会丢失，因为它们被包含在了 URL 路径中。而 query 传参的参数在 URL 的查询字符串中，可以自由选择是否包含，但刷新页面后参数依然会保留，除非用户手动更改或清除 URL。