在 Vue 中添加路由器 - Shell/Bash

介绍

在 Vue 中，路由器(Router)是用来跳转到不同页面的工具，它可以帮助我们实现单页应用程序(SPA)。在这篇文章中，我们将介绍如何将路由器添加到 Vue 中。我们将演示基于 Vue CLI 3 的添加过程。Vue CLI 3 是一个命令行界面工具，帮助我们快速搭建 Vue.js 项目，它可以帮助我们自动生成项目框架。

安装 Vue CLI

在使用 Vue CLI 之前，我们需要先在系统中安装 Node.js 和 npm。

Node.js 下载地址: https://nodejs.org/

npm 是随着 Node.js 一起安装的。

在安装好 Node.js 和 npm 之后，我们可以使用以下命令安装 Vue CLI:

npm install -g @vue/cli

安装完成后，我们可以使用下面的命令来检测安装是否成功:

vue --version

如果成功的话，会返回 Vue CLI 的版本号。

创建一个新的项目

我们可以使用 Vue CLI 创建一个新的项目:

vue create my-project

其中，my-project 是项目的名称。创建完成后，在终端中输入 cd my-project，进入项目目录。

我们可以使用以下命令来启动项目:

npm run serve

在启动项目前，请确保当前所在目录为 my-project。

添加路由器

Vue CLI 3 带有一个插件，用于添加路由器。我们可以使用以下命令来添加路由器插件:

vue add router

这会在项目中自动添加一个路由器，并对项目进行修改。

修改后的代码片段如下所示:

.
├── public
│   └── index.html
├── src
│   ├── App.vue
│   ├── main.js
│   └── router.js # <-- 添加的主要代码
├── babel.config.js
├── package.json
└── README.md

在 src 目录下，会自动生成一个 router.js 文件，其中会自动包含一个默认的路由:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

结论

在本文中，我们介绍了如何在 Vue CLI 3 中添加路由器。通过添加路由器，我们可以创建一个单页应用程序，并实现跳转到不同的页面。

添加路由器的过程非常简单，通过使用 vue add router 命令，我们就可以在项目中添加一个默认的路由。

如果您想要深入了解 Vue 路由器的更多内容，请参考 Vue 官方文档: https://router.vuejs.org/zh/

参考资料

• Vue CLI 官方文档: https://cli.vuejs.org/
• Vue 官方文档: https://cn.vuejs.org/
• Vue 路由器官方文档: https://router.vuejs.org/zh/