【Vue2 ✨】Vue2 入门之旅（九）：Vue Router 入门

在前面几篇文章中，我们学习了 Vue 的模板、组件、动画等知识。本篇将介绍 Vue Router，它是 Vue 官方提供的路由管理器，用于构建单页应用（SPA）。

---

目录

1. 什么是路由
2. [Vue Router 安装与引入](#Vue Router 安装与引入)
3. 基本用法
4. 动态路由
5. 嵌套路由
6. 编程式导航
7. 小结

---

什么是路由

在传统网站中，点击链接会向服务器发送请求，返回新的 HTML 页面。

在 单页应用（SPA） 中，页面只有一个 HTML，切换页面其实是切换 组件，路由负责管理这种组件切换。

---

Vue Router 安装与引入

在 HTML 中直接引入：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3/dist/vue-router.js"></script>

或者在项目中安装：

npm install vue-router@3

---

基本用法

<div id="app">
  <p>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
  </p>
  <router-view></router-view>
</div>

<script>
// 定义组件
const Home = { template: '<h2>这里是首页</h2>' }
const About = { template: '<h2>这里是关于页</h2>' }

// 定义路由
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

// 创建路由实例
const router = new VueRouter({ routes })

// 创建 Vue 实例
new Vue({
  el: '#app',
  router
})
</script>

• <router-link> 用来生成导航链接
• <router-view> 用来显示匹配到的组件

---

动态路由

可以在路径中使用参数：

<div id="app">
  <router-link to="/user/101">用户 101</router-link>
  <router-view></router-view>
</div>

<script>
const User = { 
  template: '<p>用户 ID：{{ $route.params.id }}</p>' 
}

const routes = [
  { path: '/user/:id', component: User }
]

const router = new VueRouter({ routes })

new Vue({
  el: '#app',
  router
})
</script>

访问 /user/101 时，会显示 用户 ID：101。

---

嵌套路由

路由里还可以嵌套子路由。

<div id="app">
  <router-link to="/parent/child">子页面</router-link>
  <router-view></router-view>
</div>

<script>
const Parent = { template: '<div>父页面 <router-view></router-view></div>' }
const Child = { template: '<p>子页面</p>' }

const routes = [
  { 
    path: '/parent', 
    component: Parent,
    children: [
      { path: 'child', component: Child }
    ]
  }
]

const router = new VueRouter({ routes })

new Vue({
  el: '#app',
  router
})
</script>

---

编程式导航

除了 <router-link>，我们也可以在代码里跳转。

this.$router.push('/home')
this.$router.replace('/about')
this.$router.go(-1) // 后退一步

---

小结

1. Vue Router 用于管理 SPA 的页面切换。
2. 核心组件：<router-link>（导航）、<router-view>（渲染）。
3. 常见功能：基本路由、动态路由、嵌套路由、编程式导航。

---

📚 下一篇文章，我们将学习 Vuex 入门，理解状态管理的思想。