[toc]

Lecture09-Vue Router 路由

1、本节讲什么

学会让单页应用有"多个页面"并能跳转。本质：地址变化 → 显示对应组件。

2、概念速览

什么是路由：让"一个应用有多个页面"，并且地址栏 URL 和页面一一对应——点导航、地址变、对应页面显示，不刷新整页。

类比：后端的 @RequestMapping 是"接口路由"；前端路由是"页面路由"。

正确 vs 误区：前端路由不是真的切换页面文件，而是"按地址显示哪个组件"；它是单页应用(SPA)的基础。

3、先看效果

安装并配置路由后，点导航按钮会在"首页 / 关于"两个页面间切换。

① 安装

npm install vue-router

② 创建视图组件（路由要显示的"页面"）

<!-- src/views/AboutView.vue -->
<template>
  <div class="about">
    <h1>关于我们</h1>
    <p>这是 About 页面。</p>
  </div>
</template>

HomeView.vue 同样建一个，写一句"这是 Home 页面"即可——两个都要有（路由表引用了它们，缺一个会报错）。

③ src/router/index.ts（定义路由表）

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },          // 地址 / 显示 Home
    { path: '/about', component: About },    // 地址 /about 显示 About
  ],
})
export default router

④ 在 main.ts 里启用路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

⑤ App.vue：放跳转链接和"当前页面显示处"

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <!-- 路由匹配到的组件会显示在 router-view 这里 -->
  <router-view />
</template>

4、照着做

1. 安装 vue-router。
2. 建 src/views/HomeView.vue、AboutView.vue（各自写一句标题）。
3. 按上面 ③④⑤ 配置。
4. 点导航，看地址栏变化和页面切换。

5、常见疑问

• Q：router-link 和普通 <a> 标签区别？ A：router-link 是 Vue 路由专用的跳转，不刷新整个页面、切换更快，且能自动带上当前激活样式。
• Q：要在跳转时带参数怎么做？ A：路由定义成 { path: '/user/:id', component: User }，组件里用 useRoute().params.id 取。跳转写 router.push('/user/1')。
• Q：router-view 是什么？ A：一个"占位"组件，当前路由对应的组件会渲染在它所在的位置。整个应用一般就一个。
• Q：页面多了，路由表会很长，怎么办？ A：可以把组件打包成"路由级懒加载"（用到才加载），写 component: () => import('../views/AboutView.vue')，AI 生成时常见，你认得就行。

补充：编程式导航（点击按钮跳转）

前面用 <router-link> 是"声明式"跳转（点标签就跳）。更多场景是"点了某个按钮后，在代码里决定跳不跳、跳哪"——比如表单提交成功后跳去结果页。这时在按钮的单击响应函数里调用 router.push()：

// 在某个组件里
import { useRouter } from 'vue-router'
const router = useRouter()

function goAbout() {
  router.push('/about')   // 点击后跳转到 /about
}

<button @click="goAbout">去关于页</button>

• router.push('/about') 和 <router-link to="/about"> 效果一样（都不刷新整页），区别是一个用代码触发、一个用标签触发。
• 想"回退一页"用 router.back()，类比浏览器后退按钮。
• 想带参数一起跳，见下面的"路由传参"。

补充：路由传参

AI 生成的代码里，页面跳转常要带参数。两种方式，别混：

① query 方式（参数写在 URL 问号后，像 GET 参数）

// 跳转（在某个组件里）
router.push('/user?id=5&type=admin')

// 在目标组件里读取
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.id);     // "5"
console.log(route.query.type);   // "admin"

路由表不用改，参数全在 URL 上。类比后端 @RequestParam。

② params 方式（路径占位，/user/5）

// 路由表里定义占位 :id
{ path: '/user/:id', component: UserView }

// 跳转
router.push('/user/5') // 或 router.push({ name: 'user', params: { id: 5 } })

// 在目标组件里读取
console.log(route.params.id);    // "5"

类比后端 @PathVariable。

补充：路由守卫

AI 代码里常有一段"进入页面前先检查"的逻辑（登录校验、权限），叫路由守卫：

// 在声明路由规则的文件中，找到 router 对象（总路由对象，调用特定的方法）
router.beforeEach((to, from) => {
  if (to.path !== '/login' && !isLoggedIn()) {
    return '/login'   // 没登录就去登录页
  }
})

• beforeEach：每次路由跳转前都会执行。
• to：要去哪个页面；from：从哪来。
• 返回 true / 不返回 → 放行；返回一个路径（如 '/login'）→ 拦截并跳过去。
• 类比后端拦截器 / Filter：进门先查证件，合格放行、不合格劝返。

看懂这段就够了：beforeEach + 判断 + return 拦截。改登录校验、页面权限，就改这里。

6、规范要点

• 路由地址用小写+短横线（/user-profile），组件文件放 src/views/ 目录。
• 每个页面一个 views/xxx.vue，不要在 App.vue 里堆所有页面。
• 路由集中在 router/index.ts 管理，别散落各处。

7、本节验证

• 会安装并启用 vue-router（createRouter + .use(router)）✅
• 会写路由表，把地址和 views/ 下的组件对应起来 ✅
• 会用 <router-link> 跳转、<router-view /> 显示当前页面 ✅
• 会用 router.push() 在按钮单击响应函数里做编程式导航跳转 ✅
• 分得清 query 与 params 两种传参方式及各自的读取写法 ✅
• 看得懂 beforeEach 路由守卫的登录校验逻辑 ✅