Vue Router 4 源码解析：揭秘 `routes` 属性和实例安装

2023-12-28 12:00:00

解析 Vue.js Router 4 源码（三）：功能强大的 routes 属性和 VueRouter 实例的安装

早在 2016 年，Vue.js Router 就诞生了，它作为一个前端路由库，迅速成为 Vue 生态系统中不可或缺的组成部分。它从一开始就为单页面应用程序（SPA）提供了无缝的导航，并且随着时间的推移，它得到了大量的完善和增强。Vue Router 4 标志着其发展历程中的一个重要里程碑，因为它引入了许多令人兴奋的新特性和改进。

在本文中，我们将深入探究 Vue Router 4 的 routes 属性，它定义了应用程序的路由规则，以及 VueRouter 实例的安装过程。

1. `routes` 属性：定义应用程序的导航规则

routes 属性是 Vue Router 的核心，它是一个数组，其中包含对象，每个对象定义了一个路由规则。每个路由规则指定了以下内容：

path ：与路由关联的路径。
component ：在该路由激活时应渲染的组件。
children （可选）：如果该路由是一个嵌套路由，则包含其子路由的数组。

例如，下面的路由配置定义了三个路由：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

当用户导航到 /about 路径时，About 组件将被渲染。类似地，导航到 /contact 路径时，Contact 组件将被渲染。

2. 安装 VueRouter 实例

要使用 Vue Router，我们需要安装其实例。为此，我们使用 createRouter 方法：

import VueRouter from 'vue-router'
import { createApp } from 'vue'

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

const app = createApp({
  // ...
})

app.use(router)