作为前端开发人员，我们经常需要在应用程序中添加路由来导航不同的页面和视图。在 Vue.js 中，我们可以使用 VueRouter 来实现路由配置，帮助我们更好地分离出页面和视图，并通过 URL 来访问它们。本文将详细介绍如何在 Vue.js 中使用 VueRouter 框架进行路由配置。
安装和配置 VueRouter
在开始配置 VueRouter 之前，我们需要先安装该框架。可以使用 npm 来安装 VueRouter：
npm install vue-router
安装完成后，可以在 Vue.js 的项目中引入并配置 VueRouter：
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------ ---- ---- -----------------------
------ ----- ---- ------------------------
------------------
----- ------ - --- -----------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
-
--
------ ------- ------在上面的代码中，我们首先引入 Vue.js、VueRouter 和两个组件 Home 和 About，然后使用 Vue.use(VueRouter) 来注册 VueRouter。接下来，我们创建了一个新的 VueRouter 实例，并通过 routes 属性来配置两个路由。每个路由对象都包含了 path、name 和 component 三个属性。path 是路由的路径，name 是路由的名称，component 是路由所对应的组件。最后，我们通过 export default 导出这个 VueRouter 实例，以便在应用程序中使用。
在 Vue.js 中使用路由
一旦 VueRouter 安装和配置完成，我们就可以在 Vue.js 中使用路由系统了。首先，我们需要在 Vue.js 的根组件中引入 VueRouter，并使用它来初始化我们的应用程序：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')在上面的代码中，我们引入了 Vue.js、App.vue 组件和 router。在新的 Vue 实例中，我们将该实例的 router 属性设置为我们之前创建的 VueRouter 实例，以便 Vue.js 知道怎样处理路由导航。最后，我们使用 $mount 方法将应用程序挂载到 DOM 树上的一个元素上。
现在我们已经将路由系统添加到我们的应用程序中了。接下来，让我们看看如何在组件中使用路由来分离出不同的页面和视图。
分离页面和视图
VueRouter 可以帮助我们将页面和视图分离开来。在 Vue.js 中，页面通常由组件构成，而视图通常由 HTML 模板构成。通过将页面与视图分离，我们可以在应用程序中更好地组织和管理页面和视图，并提高代码的可维护性和可读性。
让我们以一个简单的例子来演示。我们将创建两个组件：Home 和 About。Home 组件将包含一个简单的文本，而 About 组件将包含一张图像和一些介绍信息。这两个组件将对应着我们定义的两个路由 / 和 /about。下面是这两个组件的实现代码：
-- -------------------- ---- -------
-- --------
----------
-----
----------- -- -- ---- ---------
------- -- - ------ ---- ---------
------
-----------
--------
------ ------- --
---------
-- ---------
----------
-----
--------- -------
---- -------------------------
------ -- ---- -- ----- - -- - --- -------- --- --------- --------------
------
-----------
--------
------ ------- --
---------注意在上面的代码中，我们使用了 template 标签来定义组件的 HTML 模板内容，并使用了 script 标签来定义组件的 JavaScript 逻辑部分。在 Home 组件中，我们只是简单地包含了一些文本信息，而在 About 组件中，我们包含了一张图像和一些介绍信息。这些内容将对应着我们之前创建的两个路由 / 和 /about。
在指定路由的 component 时，我们需要使用 import() 异步地加载组件，以最小化下载时间：
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- ----
----- -------
---------- -- -- -------------------------------
--
-
----- ---------
----- --------
---------- -- -- --------------------------------
-
-
--在定义好这两个组件之后，我们只需在 VueRouter 的配置中将它们与 / 和 /about 两个路由对应起来。然后就可以在 app.vue 中使用 <router-view /> 将这些路由显示在页面上：
-- -------------------- ---- -------
----------
-----
------------ ------------------------- - ------------ -------------------------------
------------ --
------
-----------
--------
------ ------- --
---------在上面的代码中，我们使用 router-link 来创建链接，这些链接将用来在我们的应用程序中进行路由导航。然后，我们将 <router-view> 标记插入到我们的页面中，以便 Vue.js 将路由视图渲染到页面上。
我们已经成功地将组件与路由分离开来了。现在，当用户访问 / 和 /about 两个路由时，它们将分别显示 Home 和 About 两个组件的内容。接下来，让我们看看如何从组件中进行路由导航。
在组件中做路由导航
VueRouter 提供了一些方法，可以让我们在组件中进行路由导航。其中最常用的方法是 router-link 组件和 this.$router 对象。
使用 router-link 组件
router-link 组件是 VueRouter 提供的组件之一，它可以帮助我们创建符合 HTML5 原生语义的链接，并监听其点击事件，自动跳转到对应的路由。
以下是一个示例代码，展示了如何在组件中使用 router-link 组件：
-- -------------------- ---- -------
----------
-----
------------ ------------------------- - ------------ -------------------------------
---- ---------- ---- -- ---
------
-----------
--------
------ ------- --
---------在上面的代码中，我们使用 router-link 来创建了两个链接，当用户点击这些链接时，它们将自动跳转到对应的路由。这样，我们就可以在我们的应用程序中方便地进行导航了。
使用 this.$router 对象
this.$router 对象是另一个重要的 VueRouter 对象，它可以帮助我们实现动态路由、路由拦截等高级用例。
以下是一个示例代码，展示了如何在组件中使用 this.$router 对象：
-- -------------------- ---- -------
----------
-----
------- -------------------- -- ---- -------------
------
-----------
--------
------ ------- -
-------- -
---------- -
----------------------
-
-
-
---------在上面的代码中，我们在组件内部定义了一个方法 gotoHome，当用户点击按钮时会调用该方法。在方法的内部，我们使用 $router.push 方法来跳转到我们定义的 / 路由。
使用 this.$router 对象，我们可以实现复杂的路由导航逻辑，例如从一个路由跳转到另一个路由，或者阻止用户访问某些路由。
总结
通过本文的学习，我们掌握了在 Vue.js 中使用 VueRouter 实现路由配置的基本方法。我们学会了安装和配置 VueRouter，分离页面和视图，并在组件中使用路由导航等重要技术。希望本文能够帮助你更好地掌握 Vue.js 中的路由技术，并在实践中发挥出良好的应用价值。
完整示例代码：
-- -------------------- ---- -------
-- -------
------ --- ---- -----
------ --- ---- -----------
------ --------- ---- ------------
------ ---- ---- -----------------------
------ ----- ---- ------------------------
------------------
----- ------ - --- -----------
------- -
-
----- ----
----- -------
---------- -- -- -------------------------------
--
-
----- ---------
----- --------
---------- -- -- --------------------------------
-
-
--
--- -----
-------
------- - -- -------
------------------- -------------------- ---- -------
---- ------- ---
----------
-----
------------ ------------------------- - ------------ -------------------------------
------------ --
------
-----------
--------
------ ------- --
----------- -------------------- ---- -------
-- --------
----------
-----
----------- -- -- ---- ---------
------- -- - ------ ---- ---------
------
-----------
--------
------ ------- --
---------
-- ---------
----------
-----
--------- -------
---- -------------------------
------ -- ---- -- ----- - -- - --- -------- --- --------- --------------
------
-----------
--------
------ ------- --
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482d4cf48841e9894231060