📝 作者：一名 Vue 的学习者

🕒 记录时间：2025年12月

💡 目标：熟悉路由与页面跳转，实现如下的效果图

---

在前三篇中，我已经把环境搭好、项目结构弄清楚，也写了第一个页面和一些基础语法。
从这篇开始，我正式让项目具备 多页面能力 —— 也就是“能在不同页面之间跳转”。

Vue 官方的路由库是 Vue Router，在 Vue3 中需要单独安装。

这一篇主要记录我自己在项目中如何配置路由、创建页面、实现跳转，并顺便写一个简单的“首页 + 关于页” Demo。

---

1. 安装 Vue Router

如果在使用npm创建项目时没有勾选router，则需要在项目根目录执行下面的操作：

npm install vue-router

安装完成后，需要在 src 下新增一个目录：

src/
 ├─ router/
 │   └─ index.js

---

2. 创建路由配置文件（router/index.js）

我使用 history 模式（URL 变得更好看）：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

• path 是浏览器访问路径
• component 是对应要显示的页面
• createWebHistory() 让 URL 不带 #
• 最后导出 router，给 main.js 使用

---

3. 在 main.js 注册 router

文件：src/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')

这一句 .use(router) 非常关键，它让整个项目都能使用路由能力。

---

4. 创建两个页面 Home.vue 和 About.vue

在 src/views/ 创建两个文件。

---

Home.vue

<template>
  <div class="page">
    <h1>首页</h1>
    <router-link to="/about">跳转到关于页 →</router-link>
  </div>
</template>
<script setup></script>
<style scoped>
.page {
  padding: 20px;
}
</style>

---

About.vue

<template>
  <div class="page">
    <h1>关于我</h1>
    <router-link to="/">← 回到首页</router-link>
  </div>
</template>
<script setup></script>
<style scoped>
.page {
  padding: 20px;
}
</style>

router-link 是 Vue Router 内置的跳转组件。

---

5. 在 App.vue 中添加页面占位符

默认情况下，路由页面需要渲染到某个位置，这个位置通常放在 App.vue 里。

src/App.vue：

<template>
  <router-view />
</template>
<script setup></script>
<style>
body {
  margin: 0;
}
</style>

<router-view /> 是“页面容器”，用来展示路由对应的页面内容。

到此为止，项目就具备了基础的页面跳转能力。

---

6. 测试页面切换

运行项目：

npm run dev

浏览器中访问：

• http://localhost:5173/ → 首页
• http://localhost:5173/about → 关于页

也可以通过页面内的 <router-link> 点击跳转。

---

7. 进一步升级：在页面中使用编程式导航

除了 <router-link>，我也可以通过 JS 主动跳转。

例如在 Home.vue 中：

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

const router = useRouter()

function goAbout() {
  router.push('/about')
}
</script>
<template>
  <button @click="goAbout">跳转 About</button>
</template>

两种方式的区别：

方式	用法	场景
<router-link>	类似 <a>，在模板中使用	简单导航、菜单
router.push()	JS 方法手动调用	登录跳转、表单提交跳转

Vue 建议基本导航用 <router-link>，逻辑型跳转用 router.push()。

---

8. 动态路由：带参数跳转

比如一个用户详情页，路由可能是：

/user/1001

---

8.1、配置动态路由

router/index.js：

{
  path: '/user/:id',
  name: 'userDetail',
  component: () => import('@/views/UserDetail.vue')
}

---

8.2、获取路由参数

UserDetail.vue：

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log('用户ID = ', route.params.id)
</script>

跳转方式：

router.push('/user/1001')

---

9. 小练习：给 Todo List 加上“详情页”

我们这里给上一节写的 Todo List进行升级升级，Todo 列表页点击某条任务：

• 跳转到 /todo/:id
• 在详情页面显示任务id

这是路由最常见的应用。

9.1、首先在views下添加一个todo详情页

<template>
   <h1>待办id是：{{todoid}}</h1>
</template>
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
const todoid = route.params.id
</script>
<style scoped>
</style>

9.2、在router/index.js添加todo详情页路由

import Todo from '../views/TodoDetail.vue'
// 路由表
const routes = [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About },
    { path: '/todo/:id', name: 'todoDetail', component: Todo }
]

9.3、修改Home.vue的todo列表，增加跳转按钮 和gotoDetail跳转函数

</template>
<div>
    <h2>我的待办：</h2>
    <input type="text" v-model="newTodo" placeholder="new task"></input>
    <button @click="addTodo">add</button>
    <ul>
      <li v-for="todo in todolist" :key="todo.id">
        {{todo.text}}
        <button @click="gotoDetail(todo.id)">详情</button>
        <button @click="removeTodo(todo.id)">移除</button>
      </li>
    </ul>
    <p v-if="todolist.length===0">no task</p>
  </div>
</template>
<script setup>
const todolist = ref([])
const newTodo = ref('')
function addTodo() {
  if(!newTodo.value) return
  todolist.value.push({id: Date.now(), text: newTodo.value})
  newTodo.value = ''
}
function removeTodo(id) {
  todolist.value=todolist.value.filter(item => item.id !== id)
}
function gotoDetail(id) {
  router.push(`/todo/${id}`)
}
</script>

---

10. 本节小结

这一篇主要完成了 Vue Router 的基础知识：

• 安装 router 并在 main.js 注册
• 配置 routes
• 创建页面文件
• 使用 <router-link> 和 <router-view>
• 使用 router.push() 编程式导航
• 使用动态路由 /xxx/:id
• 获取 route 参数

🌱 下一步计划： 对页面展示进行优化，实现全局布局与通用页面结构（头部 + 左侧菜单） 。

---