2-2 Vue Router 路由

后端有「URL → Controller 方法」的路由映射。前端单页应用(SPA)也有路由:URL → 显示哪个页面组件。Vue Router 就干这事。

配套代码:vue-demo/src/router/index.js 和 src/views/ 下的页面。

---

1. 什么是单页应用(SPA)

传统多页网站:点链接 → 浏览器向服务器请求新 HTML → 整页刷新。 单页应用(SPA):只有一个 HTML,点链接时 JS 在前端把当前组件换成另一个,不刷新整页,体验像 App 一样流畅。

Vue Router 负责:根据当前 URL,决定在页面上渲染哪个组件。

后端类比:你写 @GetMapping("/users") 映射到一个方法;前端写 { path: '/users', component: UsersView } 映射到一个组件。区别是前端的「跳转」发生在浏览器里,不走服务器。

---

2. 配置路由

src/router/index.js:

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

const routes = [
  { path: '/',        name: 'home',  component: HomeView },
  { path: '/about',   name: 'about', component: () => import('../views/AboutView.vue') },
  { path: '/users/:id', name: 'user-detail', component: () => import('../views/UserDetailView.vue') },
]

const router = createRouter({
  history: createWebHistory(),  // 用正常的 URL(不带 #)
  routes,
})

export default router

要点:

• routes 是一个数组,每项把一个 path 映射到一个 component。
• component: () => import(...) 是懒加载:用到该页面时才下载它的代码,首屏更快(推荐对非首页这样写)。
• :id 是动态参数(像后端的 /users/{id}),后面讲怎么取。

然后在 main.js 里 app.use(router) 装上(已配好)。

---

3. 显示当前路由对应的页面:<router-view>

在 App.vue 里放一个 <router-view>,它就是「页面内容显示的位置」:

<template>
  <nav>
    <RouterLink to="/">首页</RouterLink>
    <RouterLink to="/about">关于</RouterLink>
  </nav>

  <!-- 当前 URL 对应的页面组件,会渲染在这里 -->
  <RouterView />
</template>

nav 是固定的导航,<RouterView> 的内容随 URL 变化。

---

4. 页面跳转

方式一:<RouterLink>(声明式,像 <a> 标签)

<RouterLink to="/about">去关于页</RouterLink>
<RouterLink :to="`/users/${user.id}`">查看用户</RouterLink>

它会渲染成一个链接,点了就切换路由(不刷新页面)。导航菜单、列表项跳转都用它。

方式二:代码里跳转(编程式)

在事件处理里跳转,用 useRouter:

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

function goDetail(id) {
  router.push(`/users/${id}`)   // 跳转
  // router.back()              // 返回上一页
  // router.replace('/login')   // 替换当前(不留历史)
}
</script>

后端类比:router.push 像服务端的「重定向」,但发生在前端、瞬间完成。

---

5. 获取路由参数

页面 /users/5,怎么在 UserDetailView.vue 里拿到 id = 5?用 useRoute:

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

const id = route.params.id        // 拿到路径参数 :id → '5'
// const kw = route.query.keyword // 拿到查询参数 ?keyword=xx
</script>

区分两个 hook(容易混):

• useRouter():拿「路由器」,用来跳转(push/back)。
• useRoute():拿「当前路由信息」,用来读参数(params/query)。

记忆:useRoute(无 r,名词「路由信息」)读数据;useRouter(有 r,「路由器」)做跳转。

路径参数 vs 查询参数

	写法	取值	适合
路径参数	/users/5 ←:id	route.params.id	资源 id
查询参数	/search?kw=vue	route.query.kw	筛选/搜索条件

---

6. 路由守卫(进阶,先了解)

「未登录不能进某些页面」这种需求,用全局前置守卫:

router.beforeEach((to, from) => {
  const isLogin = !!localStorage.getItem('token')
  if (to.path !== '/login' && !isLogin) {
    return '/login'   // 拦截,重定向到登录页
  }
})

后端类比:像拦截器 / 过滤器,在进入页面前做权限校验。第 5 部分实战会用到。

---

动手练习(用 vue-demo)

1. 跑起项目,点导航在「首页 / 关于 / 计数器 / 用户」之间切换,注意整页不刷新。
2. 进「用户」页,点某个用户,看 URL 变成 /users/数字,详情页用 route.params.id 取到了 id。
3. 在 UsersView.vue 里找到列表跳转代码,看它用的是 <RouterLink> 还是 router.push。
4. 自己加一个新页面:在 views/ 建 ContactView.vue,在 router/index.js 加一条 /contact 路由,在 App.vue 导航加一个 <RouterLink>。

---

小结

• SPA:一个 HTML,前端切换组件,不刷新整页。
• 路由配置:path → component 映射;非首页用 () => import() 懒加载。
• <RouterView> 显示当前页;<RouterLink to="..."> 声明式跳转。
• useRouter() 做跳转,useRoute() 读参数(params / query)。

➡️ 下一章:2-3 Pinia 状态管理