D33. 路由 vue-router

3.1. 🌐 前端路由代替后端管理单页面应用

SPA（Single Page Application）：通过前端路由实现页面切换，无需刷新页面。Vue Router 是 Vue 的路由解决方案，通过 URL 的变化实现组件动态加载。

核心优势

• 无缝体验：用户无需等待页面加载，切换速度更快
• SEO友好：配合服务端渲染（SSR）可提升搜索引擎收录
• 统一管理：路由与组件解耦，便于维护

// 传统后端路由 vs 前端路由
// 后端路由：/user/123 → 服务器返回新 HTML
// 前端路由：/user/123 → 通过 Vue Router 加载 User 组件

3.2. 🛠️ 路由的定义参数与语法

3.2.1. 静态路由配置

// 路由配置示例
const routes = [
  { path: '/', component: Home },          // 首页
  { path: '/about', component: About },    // 关于页面
  { path: '/user', component: UserList },  // 用户列表
]

3.2.2. 动态路由参数

// 配置动态路由参数
{ 
  path: '/user/:id', 
  component: UserDetails, 
  props: true // 开启参数传递
}

// 在组件中使用
<template>
  <div>User ID: {{ $route.params.id }}</div>
</template>

3.2.3. 嵌套路由

// 配置父子路由
{
  path: '/user',
  component: User,
  children: [
    { path: 'profile', component: UserProfile }, // /user/profile
    { path: 'orders', component: UserOrders }    // /user/orders
  ]
}

3.2.4. 路由别名与重定向

// 别名配置
{ path: '/home', component: Home, alias: '/main' }

// 重定向配置
{ path: '/old-path', redirect: '/new-path' }

3.3. 🔌 路由集成在 Vue 中使用

3.3.1. 安装与基础配置

npm install vue-router@4

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

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

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

export default router

3.3.2. 在 Vue 中挂载路由

// 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')

3.3.3. 路由导航组件

<!-- 使用 router-link 实现无刷新跳转 -->
<router-link to="/about">About</router-link>

<!-- 动态路由跳转 -->
<router-link :to="`/user/${userId}`">查看用户</router-link>

3.4. 🔄 路由和路由对象的使用场景

3.4.1. 路由对象 $route

// 在组件中访问路由信息
export default {
  created() {
    console.log(this.$route.path)     // 当前路径
    console.log(this.$route.params)   // 动态参数
    console.log(this.$route.query)    // 查询参数
    console.log(this.$route.meta)     // 路由元信息
  }
}

3.4.2. 路由实例 $router

// 程序化导航
this.$router.push({ 
  name: 'UserDetails', 
  params: { id: 123 }, 
  query: { sort: 'desc' } 
})

// 前进/后退
this.$router.go(-1) // 后退一步

3.4.3. 路由守卫（导航守卫）

全局前置守卫

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

组件内守卫

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染前验证权限
    next(vm => {
      // 访问组件实例
    })
  }
}

3.5. 💡 高级功能扩展

3.5.1. 路由懒加载

// 按需加载组件
const UserDetails = () => import('@/views/UserDetails.vue')

const routes = [
  { 
    path: '/user/:id', 
    component: UserDetails 
  }
]

3.5.2. 路由元信息

// 定义元信息
{ 
  path: '/admin', 
  component: AdminPanel, 
  meta: { requiresAuth: true } 
}

// 全局守卫中使用
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    // 验证权限
  }
})

知识回顾

1. 核心概念：
   • path：路由路径
   • component：对应组件
   • params：动态参数（路径中）
   • query：查询参数（URL后 ?key=value）
2. 关键方法：
   • $router.push()：跳转新路由
   • $route.params：获取动态参数
3. 高级特性：
   • 路由守卫控制权限
   • 懒加载优化性能
   • 路由元信息管理扩展属性

课后练习

1. 单选：以下哪个属性用于定义路由的元信息？

   • A. path
   • B. meta
   • C. component
   • D. query

2. 填空：动态路由参数通过______属性访问。

3. 简答：为什么在 Vue Router 中推荐使用 router-link 而不是 <a> 标签？

参考答案

1. B
2. $route.params
3. router-link 避免页面刷新，提供更好的用户体验；支持路由高亮和动态参数传递。

扩展阅读

• Vue Router 官方文档
• 路由守卫实战：权限控制
• 路由懒加载与代码分割