第七章：Vue Router — 页面路由

从这一章开始，是给项目”添砖加瓦”的实用生态。第一个要解决的问题：一个网站怎么实现”点菜单切换不同页面”。

7.1 一个痛点：单页应用怎么”切页面”

上一章我们知道了：Vite 搭的 Vue 项目是单页应用（SPA），整个网站只有一个 index.html。

可是正常的网站明明有很多”页面”啊：首页、关于我们、聊天页……点导航栏就切过去了。

只有一个 HTML，怎么做出”很多页面”的效果？

答案：靠 Vue Router（路由）。它的原理是——页面其实没真的跳转，而是根据网址的变化，在同一个页面里动态切换显示不同的组件，看起来就像换了一个页面。

7.2 路由是什么

一句话：

路由 = 一张”网址路径 ↔ 显示哪个组件”的对应表。

比如我们规定：

于是：

• 用户访问 localhost:5173/ → 页面显示 Home
• 用户访问 localhost:5173/chat → 页面显示 Chat

网址变了，显示的组件就跟着变，但整个过程不刷新页面，非常丝滑。

7.3 三步用起来

Vue Router 不是 Vue 自带的，要单独安装。

第一步：安装

npm install vue-router

第二步：配置路由表

新建 src/router/index.js，写好那张”对应表”：

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

// 路由表：路径 ↔ 组件
const routes = [
  { path: '/', component: Home },
  { path: '/chat', component: Chat }
]

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

export default router

然后在 main.js 里”启用”它（.use(router)）：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'   // 引入刚才的路由配置

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

第三步：在页面上放”占位符”

在 App.vue 里放一个 <router-view>，它就是**“当前网址对应的组件，显示在这里”**的占位坑：

<template>
  <div>
    <h1>我的网站</h1>
    <!-- 匹配到的组件会渲染在这里 -->
    <router-view />
  </div>
</template>

现在，访问 / 会在 <router-view> 处显示 Home，访问 /chat 会显示 Chat。

7.4 页面跳转的两种方式

配好了路由，怎么让用户跳过去？两种方式。

方式一：标签跳转 <router-link>

在模板里用 <router-link>，它最终会渲染成一个可点击的链接：

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/chat">聊天</router-link>
  </nav>

  <router-view />
</template>

别用普通的 <a href="">！那会刷新整个页面，失去单页应用的丝滑。导航就用 <router-link>。

方式二：代码跳转 router.push()

有时候要在 JS 逻辑里跳转（比如”登录成功后自动跳到首页”）：

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

const router = useRouter()

function goChat() {
  // 在代码里跳转到 /chat
  router.push('/chat')
}
</script>

<template>
  <button @click="goChat">开始聊天</button>
</template>

小结：用户点的导航用 <router-link>，代码里自动跳用 router.push()。

7.5 小结

• 单页应用只有一个 HTML，靠 Vue Router 根据网址切换显示不同组件，模拟出”多页面”
• 路由的本质是一张 “路径 ↔ 组件” 的对应表（routes）
• 三步用起来：
  1. npm install vue-router
  2. 写路由表 + 在 main.js 里 .use(router)
  3. 在页面放 <router-view /> 占位
• 跳转两种方式：
  • 标签跳：<router-link to="/chat">
  • 代码跳：router.push('/chat')

下一章：当多个页面/组件要共享同一份数据时（比如登录状态），怎么优雅地管理？答案是 Pinia。