企业官网建设流程全解析

1. Vue 3 路由管理的核心变革

在Vue 2时代，我们通过this.$router和this.$route来访问路由实例和当前路由信息。但随着Vue 3组合式API的推出，这种在选项式API中的访问方式已经不再适用。组合式API提供了一种更灵活、更符合函数式编程思维的方式来管理路由。

useRouter和useRoute是Vue Router专门为组合式API设计的两个核心hook。它们必须在setup()函数或<script setup>中使用，这是组合式API的基础约束条件。这两个hook的引入，使得在组件内部访问路由信息变得更加直观和类型安全。

重要提示：使用这两个hook前，必须确保你的项目已经正确安装并配置了Vue Router 4.x版本，这是Vue 3的配套路由解决方案。

2. useRouter 深度解析

2.1 基本使用方法

useRouterhook返回的是路由器的实例，相当于Vue 2中的this.$router。在组合式API组件中，我们可以这样使用它：

import { useRouter } from 'vue-router' export default { setup() { const router = useRouter() // 编程式导航 const navigateToHome = () => { router.push('/home') } return { navigateToHome } } }

或者在<script setup>语法糖中更简洁地使用：

<script setup> import { useRouter } from 'vue-router' const router = useRouter() function goToUserPage(userId) { router.push(`/user/${userId}`) } </script>

2.2 核心功能详解

useRouter返回的router实例提供了丰富的方法和属性：

1. 导航方法：

   • router.push(): 导航到新路由，会向history栈添加新记录
   • router.replace(): 替换当前路由，不会添加history记录
   • router.go(): 在history记录中前进或后退

2. 路由守卫：

   • router.beforeEach(): 全局前置守卫
   • router.beforeResolve(): 全局解析守卫
   • router.afterEach(): 全局后置钩子

3. 实用方法：

   • router.resolve(): 解析目标路由位置
   • router.addRoute(): 动态添加路由
   • router.removeRoute(): 删除路由

2.3 高级应用场景

动态路由管理是useRouter的一个重要应用场景。我们可以在运行时动态添加或删除路由：

const router = useRouter() // 添加新路由 router.addRoute({ path: '/new-route', component: () => import('./NewRoute.vue') }) // 删除路由 router.removeRoute('route-name')

导航守卫也是常见的高级用法。虽然全局守卫通常在router配置文件中设置，但有时我们也会在组件内部使用：

router.beforeEach((to, from) => { // 返回false取消导航 if (!userStore.isAuthenticated && to.meta.requiresAuth) { return '/login' } })

3. useRoute 全面剖析

3.1 基本使用方法

useRoutehook返回当前路由的响应式对象，相当于Vue 2中的this.$route。它的使用方式与useRouter类似：

import { useRoute } from 'vue-router' export default { setup() { const route = useRoute() // 访问路由参数 const userId = computed(() => route.params.id) return { userId } } }

在<script setup>中的使用示例：

<script setup> import { useRoute } from 'vue-router' import { computed } from 'vue' const route = useRoute() const postId = computed(() => route.params.postId) </script>

3.2 核心属性解析

useRoute返回的route对象包含以下重要属性：

1. 路由参数：

   • params: 动态路径参数（如/user/:id中的id）
   • query: URL查询参数（如?search=vue中的search）

2. 路由信息：

   • path: 当前路由的路径
   • name: 路由名称（如果有定义）
   • fullPath: 完整URL，包含查询参数和hash

3. 元信息：

   • meta: 路由元信息，通常用于权限控制等场景
   • matched: 当前路由匹配的所有路由记录数组

3.3 响应式特性详解

useRoute返回的对象是响应式的，这意味着当路由变化时，任何依赖于它的计算属性和watch都会自动更新：

const route = useRoute() // 响应式获取查询参数 const searchQuery = computed(() => route.query.q) // 监听路由变化 watch( () => route.params.id, (newId) => { fetchUserData(newId) } )

这种响应式特性使得在组合式API中处理路由变化变得非常直观和高效。

4. 组合式API中的路由最佳实践

4.1 路由逻辑的封装与复用

组合式API的一个巨大优势是可以将路由相关逻辑封装成可复用的composable函数。例如，我们可以创建一个useNavigation的composable：

// composables/useNavigation.js import { useRouter } from 'vue-router' export function useNavigation() { const router = useRouter() const navigateTo = (path) => { router.push(path) } const replaceTo = (path) => { router.replace(path) } const goBack = () => { router.go(-1) } return { navigateTo, replaceTo, goBack } }

然后在组件中使用：

<script setup> import { useNavigation } from '@/composables/useNavigation' const { navigateTo } = useNavigation() </script>

4.2 类型安全与TypeScript集成

在TypeScript项目中，Vue Router提供了完善的类型支持。我们可以为路由参数和查询参数定义类型：

import { useRoute } from 'vue-router' interface UserRouteParams { id: string } interface PostRouteQuery { sort?: 'asc' | 'desc' page?: number } const route = useRoute() const userId = ref('') const sortOrder = ref<'asc' | 'desc'>('asc') // 类型安全的参数访问 userId.value = route.params.id as string sortOrder.value = route.query.sort as 'asc' | 'desc' || 'asc'

4.3 路由权限控制模式

在组合式API中实现路由权限控制可以非常灵活。以下是一个基于用户角色的权限控制示例：

import { useRouter, useRoute } from 'vue-router' import { computed } from 'vue' import { useUserStore } from '@/stores/user' export function useRouteGuard() { const router = useRouter() const route = useRoute() const userStore = useUserStore() const hasPermission = computed(() => { const requiredRoles = route.meta.roles || [] return requiredRoles.length === 0 || requiredRoles.includes(userStore.role) }) watch(hasPermission, (has) => { if (!has && route.meta.requiresAuth) { router.push('/forbidden') } }, { immediate: true }) return { hasPermission } }

5. 常见问题与解决方案

5.1 路由跳转相关问题

问题1：路由跳转后页面不更新

解决方案：确保你使用的是useRoute返回的响应式对象，而不是解构它：

// 错误做法 - 解构会失去响应性 const { params } = useRoute() // 正确做法 const route = useRoute() const userId = computed(() => route.params.id)

问题2：重复导航错误

解决方案：在编程式导航时添加错误处理：

router.push('/some-path').catch(err => { // 忽略重复导航错误 if (!err.name.includes('NavigationDuplicated')) { // 处理其他错误 } })

5.2 路由参数获取问题

问题1：获取不到动态路由参数

解决方案：确保组件在路由匹配后才渲染，可以使用v-if或Suspense：

<template> <div v-if="route.params.id"> <!-- 使用路由参数 --> </div> </template>

问题2：查询参数类型不正确

解决方案：URL查询参数总是字符串类型，需要进行类型转换：

const page = computed(() => { const pageStr = route.query.page return pageStr ? parseInt(pageStr, 10) : 1 })

5.3 性能优化技巧

1. 路由懒加载：使用动态import实现组件懒加载

const routes = [ { path: '/dashboard', component: () => import('@/views/Dashboard.vue') } ]

2. 路由组件缓存：结合keep-alive和路由meta实现精细缓存控制

<router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" v-if="$route.meta.keepAlive" /> </keep-alive> <component :is="Component" v-if="!$route.meta.keepAlive" /> </router-view>

3. 滚动行为控制：在router配置中定义滚动行为

const router = createRouter({ scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else if (to.hash) { return { el: to.hash } } else { return { top: 0 } } } })

6. 实战案例：构建一个带权限管理的用户系统

让我们通过一个完整的案例来展示如何在Vue 3组合式API中高效使用useRouter和useRoute。

6.1 路由配置

首先，我们配置基本路由：

// router/index.js import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue') }, { path: '/login', name: 'Login', component: () => import('@/views/Login.vue'), meta: { guestOnly: true } }, { path: '/dashboard', name: 'Dashboard', component: () => import('@/views/Dashboard.vue'), meta: { requiresAuth: true } }, { path: '/admin', name: 'Admin', component: () => import('@/views/Admin.vue'), meta: { requiresAuth: true, roles: ['admin'] } } ] const router = createRouter({ history: createWebHistory(), routes })

6.2 路由守卫实现

在全局前置守卫中实现权限检查：

// router/index.js router.beforeEach((to, from) => { const userStore = useUserStore() // 已登录用户访问guestOnly路由时重定向 if (to.meta.guestOnly && userStore.isAuthenticated) { return '/' } // 需要认证但未登录 if (to.meta.requiresAuth && !userStore.isAuthenticated) { return '/login' } // 检查角色权限 if (to.meta.roles && !to.meta.roles.includes(userStore.role)) { return '/forbidden' } })

6.3 组件内路由逻辑

在用户详情组件中使用useRoute获取参数：

<script setup> import { useRoute } from 'vue-router' import { ref, onMounted } from 'vue' import { fetchUser } from '@/api/users' const route = useRoute() const user = ref(null) const loading = ref(false) onMounted(async () => { loading.value = true try { user.value = await fetchUser(route.params.id) } finally { loading.value = false } }) </script>

6.4 导航菜单实现

创建一个响应式的导航菜单组件：

<script setup> import { useRouter, useRoute } from 'vue-router' import { computed } from 'vue' const router = useRouter() const route = useRoute() const navItems = [ { path: '/', name: 'Home' }, { path: '/dashboard', name: 'Dashboard', auth: true }, { path: '/admin', name: 'Admin', auth: true, role: 'admin' } ] const filteredNavItems = computed(() => { const userStore = useUserStore() return navItems.filter(item => { if (item.auth && !userStore.isAuthenticated) return false if (item.role && userStore.role !== item.role) return false return true }) }) const isActive = (path) => { return route.path === path } </script>

7. 测试与调试技巧

7.1 路由单元测试

测试组件中的路由逻辑：

import { mount } from '@vue/test-utils' import { useRouter, useRoute } from 'vue-router' import Component from '@/components/Component.vue' jest.mock('vue-router', () => ({ useRouter: jest.fn(), useRoute: jest.fn() })) describe('Component', () => { it('navigates on button click', async () => { const mockPush = jest.fn() useRouter.mockReturnValue({ push: mockPush }) useRoute.mockReturnValue({ path: '/initial' }) const wrapper = mount(Component) await wrapper.find('button').trigger('click') expect(mockPush).toHaveBeenCalledWith('/expected-path') }) })

7.2 路由调试技巧

1. 路由信息日志：在开发环境中打印路由信息

watch( () => route.path, (newPath) => { console.log('Route changed to:', newPath) console.log('Route params:', route.params) console.log('Query params:', route.query) }, { immediate: true } )

2. 路由变化追踪：使用Vue DevTools观察路由状态变化

3. 路由错误处理：全局捕获路由错误

router.onError((error) => { console.error('Router error:', error) // 可以在这里上报错误到监控系统 })

7.3 性能监控

监控路由切换性能：

router.afterEach((to, from) => { const navigationTiming = performance.getEntriesByType('navigation')[0] console.log(`Navigation from ${from.path} to ${to.path} took ${ navigationTiming.duration }ms`) })

8. 与其他Vue 3特性的集成

8.1 与Pinia状态管理集成

将路由状态与Pinia store结合：

// stores/router.js import { defineStore } from 'pinia' import { useRoute } from 'vue-router' import { computed, watch } from 'vue' export const useRouterStore = defineStore('router', () => { const route = useRoute() const currentRoute = computed(() => route.path) const routeParams = computed(() => route.params) watch( () => route.query, (newQuery) => { // 响应查询参数变化 }, { deep: true } ) return { currentRoute, routeParams } })

8.2 与Teleport组件配合

在路由切换时管理全局模态框：

<template> <router-view /> <teleport to="#modals"> <AuthModal v-if="showAuthModal" /> </teleport> </template> <script setup> import { ref, watch } from 'vue' import { useRoute } from 'vue-router' const route = useRoute() const showAuthModal = ref(false) watch( () => route.query.modal, (newModal) => { showAuthModal.value = newModal === 'auth' } ) </script>

8.3 与Suspense组件结合

处理异步路由组件加载状态：

<template> <router-view v-slot="{ Component }"> <suspense> <template #default> <component :is="Component" /> </template> <template #fallback> <div class="loading">Loading...</div> </template> </suspense> </router-view> </template>

9. 迁移指南：从Vue 2到Vue 3

9.1 主要变化对比

9.2 逐步迁移策略

1. 第一步：升级到Vue Router 4
2. 第二步：在新组件中使用组合式API
3. 第三步：逐步重构旧组件
4. 第四步：移除所有this.$router和this.$route引用

9.3 常见迁移问题解决

问题1：混用选项式API和组合式API

解决方案：避免在同一组件中混用两种API风格，保持一致性。

问题2：依赖this.$route的响应性

解决方案：将所有this.$route引用替换为useRoute()的响应式访问。

问题3：路由守卫重构

解决方案：将组件内的守卫移动到setup()中使用onBeforeRouteUpdate等组合式API守卫。

10. 高级模式与创新用法

10.1 动态路由匹配的高级技巧

实现基于用户权限的动态路由：

// 在用户登录后动态添加路由 const router = useRouter() const userStore = useUserStore() watch( () => userStore.role, (newRole) => { if (newRole === 'admin') { router.addRoute({ path: '/admin', component: () => import('@/views/Admin.vue') }) } }, { immediate: true } )

10.2 路由过渡动画的精细控制

基于路由meta信息实现差异化过渡：

const route = useRoute() const transitionName = computed(() => { return route.meta.transition || 'fade' })

<router-view v-slot="{ Component }"> <transition :name="transitionName"> <component :is="Component" /> </transition> </router-view>

10.3 微前端架构中的路由协调

在主应用和子应用间协调路由：

// 主应用路由配置 const router = createRouter({ history: createWebHistory(), routes: [ { path: '/app1/*', component: () => import('@/views/MicroAppContainer.vue'), meta: { microApp: 'app1' } } ] }) // 在容器组件中 const route = useRoute() const microAppName = computed(() => route.meta.microApp)

10.4 路由状态持久化方案

在页面刷新时保持路由状态：

// 保存路由状态 watch( () => route.fullPath, (newPath) => { localStorage.setItem('lastRoute', newPath) } ) // 应用启动时恢复 onMounted(() => { const lastRoute = localStorage.getItem('lastRoute') if (lastRoute && lastRoute !== route.fullPath) { router.push(lastRoute) } })

11. 性能优化与安全实践

11.1 路由懒加载的最佳实践

使用webpack魔法注释优化代码分割：

const routes = [ { path: '/dashboard', component: () => import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue') } ]

11.2 路由级别的代码分割

基于路由实现按需加载：

function lazyLoad(view) { return () => import(`@/views/${view}.vue`) } const routes = [ { path: '/user/:id', component: lazyLoad('UserDetail') } ]

11.3 路由安全防护措施

1. 参数验证：验证路由参数的有效性

const route = useRoute() const userId = computed(() => { const id = route.params.id if (!/^\d+$/.test(id)) { throw new Error('Invalid user ID') } return id })

2. 敏感路由保护：防止未经授权的访问

router.beforeEach((to) => { if (to.meta.sensitive && !checkPermission()) { return '/not-authorized' } })

11.4 路由级别的数据预取

在路由配置中使用beforeEnter预取数据：

const routes = [ { path: '/product/:id', component: () => import('@/views/Product.vue'), async beforeEnter(to) { const store = useProductStore() await store.fetchProduct(to.params.id) } } ]

12. 生态系统集成

12.1 与Vue DevTools的配合

利用DevTools调试路由：

1. 查看当前路由状态
2. 追踪路由变化历史
3. 手动触发导航进行测试

12.2 与Vite的深度集成

在Vite配置中优化路由相关代码：

// vite.config.js export default { build: { rollupOptions: { output: { manualChunks: { 'vue-router': ['vue-router'] } } } } }

12.3 与SSR框架的适配

在Nuxt.js等SSR框架中使用组合式API路由：

// Nuxt 3中可以直接使用useRouter和useRoute const router = useRouter() const route = useRoute() // 服务端获取路由参数 if (process.server) { const { params } = useRoute() await fetchData(params.id) }

12.4 与测试工具的协同

使用Vitest测试路由相关逻辑：

import { test, expect } from 'vitest' import { useRouter } from 'vue-router' import { mount } from '@vue/test-utils' import Component from './Component.vue' test('navigates on click', async () => { const mockPush = vi.fn() useRouter.mockReturnValue({ push: mockPush }) const wrapper = mount(Component) await wrapper.find('button').trigger('click') expect(mockPush).toHaveBeenCalledWith('/expected') })

13. 未来演进与趋势展望

随着Vue生态的不断发展，useRouter和useRoute在组合式API中的应用还将继续演进。一些值得关注的趋势包括：

1. 更精细的路由懒加载控制：基于用户设备或网络条件的动态加载策略
2. 更强大的类型安全支持：更完善的TypeScript集成和类型推导
3. 更智能的预取策略：基于用户行为的预测性路由预加载
4. 更紧密的状态管理集成：与Pinia等状态库的深度整合

在实际项目中，我发现将路由逻辑封装成可组合函数可以极大提高代码的可维护性和复用性。特别是在大型应用中，合理组织路由相关代码能够显著降低复杂度。一个实用的建议是：尽早建立路由规范（如命名约定、meta字段使用规范等），这会在项目增长时带来巨大收益。