Vue3中使用组合式API通过路由传值详解
在Vue 3中，使用组合式API来传递路由参数是一种常见的需求。Vue Router 是 Vue.js 的官方路由管理工具，可以在不同的场景下通过多种方式传递和接收路由参数。下面将详细讲解几种常见的路由传值方式，并提供相应的代码示例。
1. 通过路由参数传值（动态路由参数）
路由参数是一种最常用的传值方式，通常用于 URL 路径中。例如，某个页面需要根据用户 ID 来加载数据。
使用场景：
- 根据路由参数（如用户ID）显示不同的数据或组件。
代码示例：
定义路由（router/index.js）
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import UserProfile from '../views/UserProfile.vue';const routes = [{path: '/',name: 'Home',component: Home},{path: '/user/:id', // 使用动态路由参数name: 'UserProfile',component: UserProfile}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;
在组件中使用路由参数（UserProfile.vue）
<template><div><h1>User Profile</h1><p>User ID: {{ userId }}</p></div>
</template><script setup>
import { useRoute } from 'vue-router';// 获取路由对象
const route = useRoute();// 从路由中获取动态参数
const userId = route.params.id;
</script>
2. 通过查询参数传值（URL查询字符串）
查询参数通常用于传递不属于路径的一些附加信息，适合用于过滤、分页等场景。
使用场景：
- 向一个页面传递一些过滤条件、分页信息等。
代码示例：
定义路由（router/index.js）
import { createRouter, createWebHistory } from 'vue-router';
import SearchResults from '../views/SearchResults.vue';const routes = [{path: '/search',name: 'SearchResults',component: SearchResults}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;
在组件中使用查询参数（SearchResults.vue）
<template><div><h1>Search Results</h1><p>Search Query: {{ searchQuery }}</p></div>
</template><script setup>
import { useRoute } from 'vue-router';// 获取查询参数
const route = useRoute();
const searchQuery = route.query.q;
</script>
访问 URL：
http://localhost:8080/search?q=vue3
3. 通过 state 传值（使用 router.push 或 router.replace）
通过 router.push 或 router.replace 方法，除了可以传递路径、查询参数外，还可以使用 state 来传递一些临时的状态数据。这种方式非常适合传递一些短期的、不需要在 URL 中显示的值。
使用场景：
- 在路由跳转时传递一些临时的数据，比如在表单提交后跳转到详情页，并传递表单数据。
代码示例：
跳转时使用 state 传值（在组件中使用 router.push）
<template><div><button @click="goToUserProfile">Go to User Profile</button></div>
</template><script setup>
import { useRouter } from 'vue-router';const router = useRouter();const goToUserProfile = () => {router.push({ name: 'UserProfile',params: { id: '123' },state: { fromDashboard: true }});
};
</script>
在目标组件中获取 state（UserProfile.vue）
<template><div><h1>User Profile</h1><p>User ID: {{ userId }}</p><p v-if="fromDashboard">Navigated from Dashboard</p></div>
</template><script setup>
import { useRoute, useRouter } from 'vue-router';// 获取路由参数
const route = useRoute();
const userId = route.params.id;// 获取路由状态
const router = useRouter();
const fromDashboard = router.currentRoute.value.state?.fromDashboard;
</script>
4. 通过 props 传值（配合路由的 props 配置）
Vue Router 支持将路由参数直接作为 props 传递给组件。这对于需要从路由中解耦组件逻辑的情况非常有用。
使用场景：
- 将路由参数直接作为组件的 props 传递，减少路由与组件之间的耦合。
代码示例：
定义路由（router/index.js）
import { createRouter, createWebHistory } from 'vue-router';
import UserProfile from '../views/UserProfile.vue';const routes = [{path: '/user/:id',name: 'UserProfile',component: UserProfile,props: true // 开启 props 传递}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;
在组件中接收 props（UserProfile.vue）
<template><div><h1>User Profile</h1><p>User ID: {{ id }}</p></div>
</template><script setup>
// 接收路由参数作为 props
defineProps({id: String
});
</script>
5. 总结
在 Vue 3 中，可以通过不同的方式在路由之间传递值，选择哪种方式取决于具体的使用场景：
- 动态路由参数：适用于需要根据 URL 动态改变内容的场景。
- 查询参数：适用于传递额外的过滤条件或分页信息。
state：适用于传递不需要展示在 URL 中的临时数据。props：适用于将路由参数直接作为组件的 props，简化组件的逻辑。
这些传值方法可以根据实际需求组合使用，以提供更灵活的路由管理和数据传递机制。