Vue Router：Vue.js 的官方路由管理器

什么是 Vue Router？

Vue Router 是 Vue.js 的官方路由管理器。它与 Vue.js 核心深度集成，让构建单页应用变得轻而易举。主要功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接

基础路由配置

安装和基本设置

# 安装 vue-router
npm install vue-router@4

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

路由导航

<template>
  <nav>
    <!-- 使用 router-link 组件进行导航 -->
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于</router-link>
  </nav>

  <!-- 路由出口 -->
  <router-view></router-view>
</template>

动态路由匹配

参数路由

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User,
    // 可选参数
    path: '/optional/:id?',
    // 多个参数
    path: '/multiple/:category/:id',
    // 正则表达式
    path: '/user/:id(\\d+)'
  }
]

<template>
  <div>
    <h2>用户详情</h2>
    <p>用户 ID：{{ $route.params.id }}</p>
    <p>用户名：{{ userData.name }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const userData = ref({})

onMounted(async () => {
  // 获取路由参数
  const userId = route.params.id
  // 根据 ID 获取用户数据
  userData.value = await fetchUserData(userId)
})
</script>

嵌套路由

配置嵌套路由

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // 当 /user/:id/profile 匹配成功
        path: 'profile',
        component: UserProfile
      },
      {
        // 当 /user/:id/posts 匹配成功
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

嵌套视图

<template>
  <div class="user-layout">
    <nav>
      <router-link :to="`/user/${id}/profile`">个人资料</router-link> |
      <router-link :to="`/user/${id}/posts`">文章列表</router-link>
    </nav>

    <router-view></router-view>
  </div>
</template>

导航守卫

全局守卫

router.beforeEach((to, from) => {
  // 检查用户是否已登录
  const isAuthenticated = checkAuth()

  if (
    // 检查目标路由是否需要认证
    to.matched.some(record => record.meta.requiresAuth) &&
    // 检查用户是否未登录
    !isAuthenticated
  ) {
    // 重定向到登录页
    return {
      path: '/login',
      query: { redirect: to.fullPath }
    }
  }
})

路由独享守卫

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from) => {
      // 检查用户权限
      if (!hasAdminRole()) {
        return '/403'
      }
    }
  }
]

组件内守卫

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

import ReferenceAnswer from '@/components/common/ReferenceAnswer.vue';

// 离开路由前确认
onBeforeRouteLeave((to, from) => {
  const answer = window.confirm('确定要离开吗？未保存的数据将会丢失')
  if (!answer) return false
})

// 路由更新前处理
onBeforeRouteUpdate(async (to, from) => {
  // 路由参数改变时重新获取数据
  if (to.params.id !== from.params.id) {
    await loadData(to.params.id)
  }
})
</script>

路由懒加载

基本用法

// 使用动态导入实现路由懒加载
const routes = [
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/user/:id',
    name: 'User',
    // 带有预加载的懒加载
    component: () => import(/* webpackPrefetch: true */ '../views/User.vue')
  }
]

按模块分组

const routes = [
  {
    path: '/admin',
    component: () => import('../views/admin/Layout.vue'),
    children: [
      {
        path: 'dashboard',
        component: () => import('../views/admin/Dashboard.vue')
      },
      {
        path: 'users',
        component: () => import('../views/admin/Users.vue')
      }
    ]
  }
]

路由模式

Hash 模式 vs History 模式

// Hash 模式 - 使用 URL hash 来模拟完整的 URL
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// History 模式 - 使用 HTML5 History API
const router = createRouter({
  history: createWebHistory(),
  routes
})

最佳实践

1. 路由组织

   • 按功能模块组织路由
   • 使用懒加载优化性能
   • 合理设置路由元信息

2. 导航安全

   • 实现必要的导航守卫
   • 处理未授权访问
   • 保护用户数据

3. 性能优化

   • 路由组件懒加载
   • 预加载重要路由
   • 缓存频繁访问的组件

进阶技巧

路由元信息

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: {
      requiresAuth: true,
      roles: ['admin'],
      title: '管理后台'
    }
  }
]

// 使用元信息
router.beforeEach((to, from) => {
  // 设置页面标题
  document.title = to.meta.title || '默认标题'

  // 检查权限
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return '/login'
  }

  // 检查角色
  if (to.meta.roles && !hasRole(to.meta.roles)) {
    return '/403'
  }
})

滚动行为

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 如果存在保存的位置，则返回保存的位置
    if (savedPosition) {
      return savedPosition
    }

    // 如果有哈希值，滚动到指定元素
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      }
    }

    // 否则滚动到顶部
    return { top: 0 }
  }
})

总结

Vue Router 是构建 Vue 单页应用的核心工具：

• 提供了完整的路由功能支持
• 与 Vue.js 深度集成
• 支持多种路由模式
• 提供丰富的导航控制
• 具有良好的性能优化选项

掌握 Vue Router 对于构建现代化的 Vue 应用至关重要。通过合理的路由设计和优化，可以显著提升应用的用户体验和性能。