Vue Router Composition API 完全指南：现代化路由开发的必备技能

Vue Router Composition API 完全指南：现代化路由开发的必备技能

【免费下载链接】router🚦 The official router for Vue.js项目地址: https://gitcode.com/gh_mirrors/router6/router

Vue Router 作为 Vue.js 官方路由管理器，随着 Composition API 的推出迎来了更灵活的开发方式。本文将系统介绍如何利用 Composition API 提升路由开发效率，从基础使用到高级技巧，帮助开发者掌握现代化路由开发的核心技能。

为什么选择 Composition API 进行路由开发？

Composition API 为 Vue 开发带来了更灵活的代码组织方式，尤其在处理路由逻辑时展现出显著优势：

• 逻辑复用：轻松提取和复用路由相关逻辑，如鉴权、数据加载等
• 类型安全：与 TypeScript 完美结合，提供更好的类型推断
• 响应式管理：精细化控制路由状态，避免不必要的重渲染
• 更清晰的代码结构：将相关路由逻辑集中管理，提高可维护性

基础使用：访问路由与导航

在 Composition API 中，我们使用useRouter和useRoute两个核心函数替代 Options API 中的this.$router和this.$route：

<script setup> import { useRouter, useRoute } from 'vue-router' const router = useRouter() const route = useRoute() // 导航到指定路由 function goToUserProfile() { router.push({ name: 'user', params: { id: 123 } }) } </script>

route对象是响应式的，建议直接监听所需变化的属性而非整个对象：

<script setup> import { useRoute } from 'vue-router' import { watch } from 'vue' const route = useRoute() // 监听参数变化 watch( () => route.params.id, (newId, oldId) => { console.log(`ID 从 ${oldId} 变为 ${newId}`) // 执行数据加载等操作 } ) </script>

路由守卫：控制页面访问与行为

Composition API 提供了更直观的路由守卫函数，替代了 Options API 中的导航守卫选项：

离开守卫：防止意外导航

<script setup> import { onBeforeRouteLeave } from 'vue-router' onBeforeRouteLeave((to, from) => { const answer = window.confirm('确定要离开吗？您有未保存的更改！') // 如果用户取消，则阻止导航 if (!answer) return false }) </script>

更新守卫：处理参数变化

<script setup> import { onBeforeRouteUpdate } from 'vue-router' import { ref } from 'vue' const userData = ref(null) onBeforeRouteUpdate(async (to, from) => { // 仅在 ID 变化时重新获取数据 if (to.params.id !== from.params.id) { userData.value = await fetchUser(to.params.id) } }) </script>

值得注意的是，Composition API 守卫可以用在任何由<router-view>渲染的组件中，而不仅限于路由组件本身。

高级技巧：自定义 RouterLink 组件

使用useLink组合式函数可以创建自定义的路由链接组件，实现更灵活的导航 UI：

<script setup> import { useLink } from 'vue-router' import { computed } from 'vue' const props = defineProps({ ...RouterLink.props, inactiveClass: String, }) const { route, href, isActive, isExactActive, navigate } = useLink(props) // 自定义激活状态逻辑 const linkClass = computed(() => isActive.value ? 'active-link' : props.inactiveClass || 'default-link' ) </script>

最佳实践与注意事项

1. 避免过度使用 watch：优先使用路由守卫处理参数变化，而非通用 watch
2. 模板中直接使用 $route：模板中仍可直接访问$router和$route，无需额外引入
3. 逻辑抽离：将复杂路由逻辑提取为独立的组合式函数，如useAuthGuard()
4. 类型定义：结合 TypeScript 使用时，可通过 src/typed-routes/ 目录下的类型定义增强类型安全

结语

Composition API 为 Vue Router 带来了更现代、更灵活的开发体验。通过useRouter、useRoute等组合式函数，我们可以更精细地控制路由行为，构建更健壮的单页应用。无论是小型项目还是大型应用，掌握这些技能都将显著提升开发效率和代码质量。

官方文档中关于 Composition API 的详细内容可参考 guide/advanced/composition-api.md，其中包含更多高级用法和示例。

【免费下载链接】router🚦 The official router for Vue.js项目地址: https://gitcode.com/gh_mirrors/router6/router