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，简化组件的逻辑。

这些传值方法可以根据实际需求组合使用，以提供更灵活的路由管理和数据传递机制。