随着单页面应用程序的流行，许多前端开发人员开始使用 Vue.js 构建自己的应用。
Vue.js 是一个轻量级的 JavaScript 框架，它使得构建 Web 应用程序变得更加快捷和容易。同时，它还提供了一个灵活的路由管理器，叫做 vue-router。
在本文中，我们将深入介绍如何使用 vue-router 来管理页面路由，包括路由的定义、监听和跳转。
安装 vue-router
要使用 vue-router，您需要先将其添加到您的 Vue.js 项目中。您可以使用 npm 来安装它：
npm install vue-router
完成安装后，您可以将其导入您的 Vue.js 应用程序中：
import VueRouter from 'vue-router'; import Vue from 'vue'; Vue.use(VueRouter);
此时，您可以开始创建和定义路由。
定义路由
在 vue-router 中，路由被定义为一个数组，其中每个路由都是一个对象。每个路由对象具有包含路由信息的属性，如名称、路径和组件。您可以像这样定义一个基本的路由：
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About },
{ path: '/contact', name: 'Contact', component: Contact }
];在此示例中，我们定义了三个路由：首页、关于页面和联系页面。每个路由都包含一个 path 属性，指定路由的路径。
要使用这些路由，我们需要创建一个 vue-router 实例：
const router = new VueRouter({
routes
});现在，我们已经定义了路由和创建了路由器实例，下一步是启动我们的 Vue 应用程序。要将它们绑定在一起，请在 Vue 实例中添加以下代码：
new Vue({
router,
render: h => h(App)
}).$mount('#app');此代码将 VueRouter 实例作为一个选项传递给应用程序的主 Vue 实例。
现在，我们已经完成了路由的定义和创建。下一步是监听和控制页面跳转。
监听和跳转路由
我们可以使用 vue-router 提供的 router-link 组件，它相当于 HTML 的超链接。通过为 router-link 组件添加 to 属性，您可以指定目标路由的路径。
<router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link>
但是，如果您想要在代码中控制页面跳转，则需要使用编程式跳转。vue-router 提供了两个方法来控制跳转：
this.$router.push()this.$router.replace()
这两种方法可以接收一个路由对象或一个字符串，指定跳转目标的路径。
methods: {
goToPage(page) {
this.$router.push(page);
}
}在此示例中，我们将 goToPage 方法添加到 Vue 组件中，它接收一个页面参数，并使用 this.$router.push() 方法跳转到目标页面。
Vue-router 和 Vue.js 的结合使用
vue-router 与 Vue.js 的结合使用很容易。vue-router 提供了一些高阶组件来启用更深层次的路由功能。这样，当您使用 Vue.js 开发应用程序时，可以轻松地实现路由功能。
例如，在 Vue 组件中，您可以使用以下语法跳转到卡片列表组件：
-- -------------------- ---- -------
----------
-----
------ --------
------- ----------------------- --------------
------
-----------
--------
------ ------- -
----- ------
-------- -
----------- -
----------------------------
-
-
--
---------使用 this.$router.push() 方法即可跳转到 cards 路由。
总结
Vue.js 与 vue-router 相结合，可以使开发者在构建单页应用程序时遇到的大部分路由问题变得更加简单。在本文中，我们介绍了如何在 Vue.js 应用程序中使用 vue-router 来定义、监听和跳转路由。
vue-router 提供的功能可以让您轻松控制单页应用程序的路由，并实现更深层次的功能。如果您正在使用 Vue.js 开发应用程序，则应该尝试使用 vue-router 来添加路由管理功能。
示例代码：
-- -------------------- ---- ------- ------ --------- ---- ------------- ------ --- ---- ------ ------ ---- ---- ------------------------ ------ ----- ---- ------------------------- ------ ------- ---- --------------------------- ------------------- ----- ------ - - - ----- ---- ----- ------- ---------- ---- -- - ----- --------- ----- -------- ---------- ----- -- - ----- ----------- ----- ---------- ---------- ------- - -- ----- ------ - --- ----------- ------ --- --- ----- ------- ------- - -- ------ ------------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64574bf9968c7c53b0a0fad3