前言
在现代前端应用中，单页应用（Single Page Application，SPA）越来越受欢迎。随着 Web 技术的发展，越来越多的 Web 应用开始采用 SPA 的方式来实现前端页面模块化和快速交互切换页面的功能。
Vue.js 是一个非常流行的 Web 前端框架，为开发者提供了一套完整的 SPA 架构脚手架。在 Vue.js 中，路由功能通过 vue-router 来实现。
在本文中，我们将详细介绍如何在 Vue SPA 应用中使用 vue-router 实现路由跳转的功能，并附带示例代码作为指导。
安装 vue-router
要使用 vue-router，我们需要在 Vue 应用中先安装它。
在命令行中输入以下命令来安装 vue-router：
npm install vue-router --save
安装完成后，我们就可以在项目中使用 vue-router 了。
配置路由
在 Vue.js 中，使用 vue-router 实现路由跳转需要进行路由配置。
我们需要在项目中创建一个路由配置文件，一般命名为 router.js，并在其中定义路由。
-- -------------------- ---- -------
-- ---------
------ --- ---- -----
------ --------- ---- ------------
------ ---- ---- ------------------
------ ----- ---- -------------------
------------------
----- ------ - --- -----------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
-
--
------ ------- ------在路由配置文件中，我们首先需要导入 Vue 和 VueRouter，然后通过 Vue.use(VueRouter) 来安装 vue-router 插件。
接着，我们通过定义 routes 数组来配置路由。每个路由都需要定义 path、name 和 component，其中 path 是路由地址，name 是路由名称，component 是该路由所对应的 Vue 组件。
在本示例中，定义了两个路由：/ 和 /about。分别映射到 Home.vue 和 About.vue 组件。
最后，我们需要导出定义好的 router 路由实例。
使用路由
在项目中使用 vue-router 实现路由跳转很简单。我们只需要在组件中使用路由链接和路由传参即可。
路由链接
在组件中，我们通过 <router-link> 标签来实现路由链接。
<router-link to="/">Home</router-link> <router-link to="/about">About</router-link>
在 to 属性中指定我们要跳转的路由地址即可。
路由传参
在实际开发中，我们有时需要向路由传递一些参数。在 vue-router 中，我们可以使用 params 和 query 来实现路由传参。
- params：动态路由和嵌套路由传参方法，参数会被编码到 URL 中，可通过
$route.params获取。 - query：查询参数传参方法，参数不会被编码到 URL 中，可通过
$route.query获取。
在组件中使用带有参数的路由链接，需要在 to 属性中传递一个对象。例如：
<!-- params 传参方式 -->
<router-link :to="{ name: 'about', params: { id: 123 }}">About</router-link>
<!-- query 传参方式 -->
<router-link :to="{ name: 'about', query: { id: 123 }}">About</router-link>示例代码
下面是一个完整的示例代码，包括路由配置和路由跳转的实现。
router.js
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------ ---- ---- ------------------
------ ----- ---- -------------------
------------------
----- ------ - --- -----------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
-
--
------ ------- ------App.vue
-- -------------------- ---- -------
----------
---- ---------
---- ------------
------------ -------------------------
------------ ------ ----- -------- ------- - --- --- -----------------------
------------ ------ ----- -------- ------ - --- --- -----------------------
------
------------ --
------
-----------
--------
------ ------- -
----- ------
-
---------
-------
---- -
-------- -----
---------------- -------
-
---- - -
------- - -----
-
--------Home.vue
-- -------------------- ---- -------
----------
-----
-------------
------
-----------
--------
------ ------- -
----- -------
-
---------About.vue
-- -------------------- ---- -------
----------
-----
--------------
------ -- ---------------- ------
------ -- --------------- ------
------
-----------
--------
------ ------- -
----- --------
-
---------总结
在本文中，我们详细介绍了在 Vue SPA 应用中使用 vue-router 实现路由跳转的功能，并提供了示例代码作为指导。
vue-router 是 Vue.js 中非常重要的一个功能模块，在 SPA 应用开发中，它可以帮助我们实现路由跳转和参数传递等功能，为应用的模块化开发和快速交互切换提供了便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646eeeec968c7c53b0d50d06