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

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

目录

1. 什么是路由
2. 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 入门，理解状态管理的思想。