Vue3 路由学习笔记

Vue3 路由学习笔记

1. 路由基本概念

1.1. 什么是路由？

路由就是根据不同的 URL 路径展示不同的页面内容。在单页面应用（SPA）中，路由实现了在不刷新整个页面的情况下切换视图。

1.2. 路由组件 vs 普通组件

• 路由组件：通常放在 pages/ 或 views/ 文件夹，通过路由配置进行管理
• 普通组件：放在 components/ 文件夹，在其他组件中直接引入使用

2. 路由基础配置

2.1. 创建路由器

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'

const router = createRouter({
  // 选择路由模式
  history: createWebHistory(),
  // 配置路由规则
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
})

export default router

2.2. 在应用中使用

// main.ts
import router from './router'
app.use(router)  // 注册路由

2.3. 在组件中使用路由

<template>
  <!-- 导航链接 -->
  <RouterLink to="/home">首页</RouterLink>
  <RouterLink to="/about">关于</RouterLink>
  
  <!-- 路由视图容器 -->
  <RouterView></RouterView>
</template>

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

3. 路由模式

Vue Router 支持两种路由模式：

3.1. History 模式

history: createWebHistory()

• 优点：URL 美观，没有 # 号
• 缺点：需要服务端配置支持，否则刷新会404

3.2. Hash 模式

history: createWebHashHistory()

• 优点：兼容性好，无需服务端配置
• 缺点：URL 有 # 号，不够美观

4. 命名路由

给路由起名字可以简化跳转，特别在路径比较复杂时很有用。

4.1. 配置命名路由

routes: [
  { 
    name: 'home',      // 路由名称
    path: '/home',     // 访问路径  
    component: Home
  }
]

4.2. 使用命名路由跳转

<!-- 方式1：字符串路径 -->
<RouterLink to="/home">首页</RouterLink>

<!-- 方式2：对象形式（推荐） -->
<RouterLink :to="{ name: 'home' }">首页</RouterLink>
<RouterLink :to="{ path: '/home' }">首页</RouterLink>

5. 嵌套路由

用于在父路由内部显示子路由内容，比如在新闻列表页面显示新闻详情。

5.1. 配置嵌套路由

{
  path: '/news',
  component: News,
  children: [
    {
      path: 'detail',  // 注意：不要以 / 开头
      component: Detail
    }
  ]
}

5.2. 在父组件中使用

<!-- News.vue -->
<template>
  <div>
    <h2>新闻列表</h2>
    <!-- 导航到子路由 -->
    <RouterLink to="/news/detail">查看详情</RouterLink>
    
    <!-- 子路由显示位置 -->
    <RouterView/>
  </div>
</template>

6. 路由传参

6.1. Query 参数

通过 URL 的 ? 后面传递参数，适合可选参数。

传递参数：

<RouterLink 
  :to="{
    path: '/news/detail',
    query: { 
      id: 1, 
      title: '新闻标题' 
    }
  }"
>
  查看详情
</RouterLink>

接收参数：

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()

// 获取query参数
console.log(route.query.id)    // 1
console.log(route.query.title) // "新闻标题"
</script>

6.2. Params 参数

通过 URL 路径传递参数，适合必填参数。

路由配置（需要占位）：

{
  path: '/news/detail/:id/:title',  // 使用 : 占位
  component: Detail
}

传递参数：

<RouterLink 
  :to="{
    name: 'detail',  // 必须使用name跳转
    params: { 
      id: 1, 
      title: '新闻标题' 
    }
  }"
>
  查看详情
</RouterLink>

接收参数：

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()

// 获取params参数
console.log(route.params.id)    // 1
console.log(route.params.title) // "新闻标题"
</script>

7. 路由的 Props 配置

将路由参数作为 props 传递给组件，让组件更纯粹。

7.1. 三种配置方式

{
  path: '/detail/:id',
  component: Detail,
  
  // 方式1：布尔模式 - 将params转为props
  props: true,
  
  // 方式2：对象模式 - 传递静态props
  props: { type: 'news' },
  
  // 方式3：函数模式 - 自定义props
  props: route => ({
    id: route.params.id,
    query: route.query
  })
}

8. 编程式导航

通过 JavaScript 代码控制路由跳转，适合在方法中跳转。

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

const router = useRouter()  // 路由跳转方法
const route = useRoute()    // 当前路由信息

// 跳转到首页
const goHome = () => {
  router.push('/home')
  // 或者
  router.push({ name: 'home' })
}

// 替换当前页面（不记录历史）
const replaceHome = () => {
  router.replace('/home')
}

// 前进后退
const goBack = () => {
  router.back()    // 后退
  router.go(-1)    // 后退一页
  router.go(1)     // 前进一页
}
</script>

9. 其他重要功能

9.1. replace 属性

<RouterLink replace to="/home">首页</RouterLink>

使用 replace 跳转不会在历史记录中添加新条目。

9.2. 重定向

{
  path: '/',
  redirect: '/home'  // 访问根路径时重定向到首页
}

10. 实践总结

1. 路由命名：为重要路由设置 name，方便跳转和维护
2. 参数传递：
   • 必填参数用 params
   • 可选参数用 query
3. 编程式导航：在方法中跳转时使用
4. 组件通信：优先使用路由参数，而不是 Vuex/pinia

通过合理使用 Vue Router，可以构建出体验良好的单页面应用，实现流畅的页面切换和导航体验。