vue Router 30分钟入门指南，从基础使用到模拟实现

前端

2024-01-24 23:19:41

无论你是 Vue.js 新手还是经验丰富的开发者，本文将带你快速掌握 Vue-Router 的精髓，让你轻松构建单页应用程序。

Vue-Router 基础

Vue-Router 是 Vue.js 官方的路由器库，它允许我们在单页应用程序中构建动态的路由系统。Vue-Router 的核心概念包括：
- 路由：一条路由定义了一个 URL 路径和一个组件。
- 组件：组件是 Vue.js 中用于构建用户界面的可重用代码块。
- 视图：视图是组件的实例，它被渲染到 DOM 中。
基本用法

要使用 Vue-Router，你需要先在 Vue 实例中安装它：
```
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
```
然后，你需要定义路由表：
```
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]
```
在 routes 数组中，每个对象代表一条路由，它包含了路径（path）和组件（component）两个属性。路径是指 URL 中的路径，组件是与该路径关联的组件。
导航

要导航到不同的路由，你可以使用 router-link 组件：
```
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
```
当用户点击这些链接时，Vue-Router 将会更新 URL 并渲染相应的组件。
动态路由

你可以使用动态路由来动态生成路由。动态路由的路径中包含一个或多个占位符，当用户访问该路由时，占位符将被替换为实际的值。例如：
```
const routes = [
  { path: '/user/:id', component: User },
]
```
当用户访问 /user/1 时，id 占位符将被替换为 1，并且 User 组件将被渲染。
嵌套路由

嵌套路由允许你在一个路由中嵌套另一个路由。这对于构建复杂的用户界面非常有用。例如：
```
const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      { path: 'posts', component: UserPosts },
      { path: 'comments', component: UserComments },
    ],
  },
]
```
当用户访问 /user/1/posts 时，User 组件将被渲染，并且 UserPosts 组件将被嵌套在 User 组件中。
模拟实现 History 模式

Vue-Router 默认使用 hash 模式，这意味着 URL 中包含一个井号 (#)。如果你想使用 History 模式，你需要进行一些额外的配置。

你可以使用以下代码模拟实现 History 模式：
```
const router = new VueRouter({
  mode: 'history',
  base: '/my-app/',
})
```
这样，当用户访问 /my-app/about 时，URL 中将不包含井号。