前言
在使用 Vue.js 开发单页应用 (SPA) 的过程中，经常需要使用路由进行页面跳转和管理。Vue Router 是 Vue.js 官方的路由管理器，可以轻松地实现页面路由的配置和管理。在使用 Vue Router 的过程中，可以通过 Vue CLI 提供的插件 @vue/cli-plugin-router 来帮助我们快速地集成 Vue Router 到我们的应用中。本文将详细介绍如何使用 @vue/cli-plugin-router 插件来快速集成 Vue Router 到 Vue.js 应用中。
安装
首先，需要安装 Vue CLI，如果你还没有安装，你可以通过以下命令进行安装：
npm install -g @vue/cli
然后，我们需要在 Vue.js 项目中安装 @vue/cli-plugin-router 插件，可以通过以下命令进行安装：
vue add router
安装完成后，我们可以在 Vue.js 项目的根目录下查看到 vue.config.js 文件和 src/router/index.js 文件。
配置
在使用 @vue/cli-plugin-router 插件后，我们需要在 src/router/index.js 文件中进行路由配置。在该文件中，我们可以使用 Vue Router 的 API 来配置路由信息，如下：
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------------------
----- ------ - -
-
----- ----
----- -------
---------- -- -- ---------------------------
--
-
----- ---------
----- --------
---------- -- -- ----------------------------
-
-
----- ------ - --- -----------
----- ----------
----- ---------------------
------
--
------ ------- ------以上代码中，我们通过 import 语句引入了 Vue.js 应用中的两个页面组件，即 Home.vue 和 About.vue。然后，我们创建了一个路由表 routes，其中定义了两个路由信息。每个路由信息包含了一个 path 属性和一个 component 属性，分别表示路由路径和对应的页面组件。我们还可以为路由信息定义 name 属性，用于在组件中进行路由跳转时使用。
在创建了路由表 routes 后，我们创建了一个 VueRouter 实例，并传入了路由表和其它一些参数进行配置，如 mode、base 等。然后，我们通过 export default 关键字导出了该实例，使其可以在其它组件中进行使用。
使用
在配置完成 Vue Router 后，我们就可以在 Vue.js 应用中使用它来进行页面跳转和管理。在组件中，我们可以通过编写以下代码来跳转到其它页面：
this.$router.push({ path: '/about' });其中，$router 是 Vue.js 中自带的一个属性，它表示 Vue Router 实例，通过调用该实例的 push 方法即可完成页面跳转。
我们还可以通过 router-link 标签来创建一个页面链接，如下：
<router-link to="/about">去 About 页面</router-link>
以上代码中，我们通过 to 属性指定了要跳转的页面路径，当用户点击该链接时，页面将会自动跳转到指定的路径。
示例
以下代码是一个完整的 Vue.js 组件示例，其中包含了如何使用 @vue/cli-plugin-router 插件和 Vue Router 进行页面跳转和管理的相关代码：
-- -------------------- ---- -------
----------
-----
-------- -------
----- ------- ------
------------ ------------- ----- ----------------
------
-----------
--------
------ ------- -
----- -------
---- -- -
------ -
-------- ----- ---- ---
-
--
-------- -
--------- -- -
------------------- ----- -------- --
-
-
-
---------总结
在本文中，我们详细介绍了如何使用 npm 包 @vue/cli-plugin-router 来快速集成 Vue Router 到 Vue.js 项目中。通过使用该插件，我们可以方便地进行路由管理，快速创建页面跳转和链接。希望本文对你有所帮助，祝你在 Vue.js 开发中取得不断的进步和成长！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/193647