Vue.js 是一个流行的前端框架，它的核心是数据驱动视图，让开发者可以更轻松地构建交互式的 Web 应用程序。Vue Router 是 Vue.js 的官方路由管理器，它可以帮助我们实现页面跳转和路由控制。在本文中，我们将介绍如何使用 Vue Router 实现页面跳转的方法，包括路由配置、路由跳转和路由传参等。
路由配置
在使用 Vue Router 实现页面跳转之前，我们需要先进行路由配置。路由配置是指告诉 Vue Router 哪些 URL 对应哪些组件，以及如何传递参数。在 Vue.js 中，我们可以通过创建一个路由实例来进行路由配置，例如：
------ --- ---- ----- ------ --------- ---- ------------ ------ ---- ---- ----------------------- ------ ----- ---- ------------------------ ------------------ ----- ------ - - - ----- ---- ---------- ---- -- - ----- ------------- ---------- ------ ------ ---- - - ----- ------ - --- ----------- ------ -- ------ ------- ------
在上面的代码中，我们先引入了 Vue、VueRouter 以及我们需要的组件。接着，我们定义了一个 routes 数组，其中包含两个对象，分别表示两个路由：'/' 和 '/about/:id'。其中，'/' 表示根路由，即默认路由，它对应的组件是 Home.vue；'/about/:id' 表示带参数的路由，其中 :id 表示参数，它对应的组件是 About.vue。在第二个路由中，我们设置了 props: true，表示将路由参数作为组件的 props 传递。最后，我们创建了一个 router 实例，并将 routes 对象传递给它。
路由跳转
在路由配置完成之后，我们就可以使用 Vue Router 实现页面跳转了。在 Vue.js 中，我们可以通过编写代码来触发路由跳转。例如：
----------
-----
------------ -------------------------
------------ ------ ----- -------- ------- - --- - -----------------------
------
-----------在上面的代码中，我们使用了 router-link 组件来生成链接。第一个链接表示跳转到根路由，即 Home.vue 组件；第二个链接表示跳转到带参数的路由，即 About.vue 组件，并传递了一个 id 参数。另外，我们也可以使用编程式导航来实现路由跳转，例如：
-- ---- ---------------------- ------------------- ----- -------- ------- - --- - - -- -- ---- ------ ------ ---- ---------- ---------------- ------------- ----- -------- ------- - --- - - --
在上面的代码中，我们使用了 this.$router.push() 方法和 router.push() 方法来触发路由跳转。其中，'/' 表示跳转到根路由，即 Home.vue 组件；{ name: 'about', params: { id: 1 } } 表示跳转到带参数的路由，即 About.vue 组件，并传递了一个 id 参数。
路由传参
在路由跳转时，我们经常需要传递一些参数给目标组件，以便目标组件进行相应的处理。在 Vue.js 中，我们可以通过路由配置和路由跳转来实现路由传参。在路由配置中，我们可以使用 props 属性来将路由参数作为组件的 props 传递，例如：
----- ------ - - - ----- ---- ---------- ---- -- - ----- ------------- ---------- ------ ------ ---- - -
在上面的代码中，我们将 props 属性设置为 true，表示将路由参数作为组件的 props 传递。在 About.vue 组件中，我们可以通过 props 属性来接收路由参数，例如：
------ ------- - ----- -------- ------ ------- -- --- -
在上面的代码中，我们定义了一个 props 数组，其中包含一个 id 参数。在组件中，我们可以通过 this.id 来获取该参数的值。
除了使用 props 属性来传递路由参数之外，我们还可以使用路由跳转时的 to 属性来传递参数，例如：
------------ ------ ----- -------- ------- - --- - -----------------------
在上面的代码中，我们将路由参数作为 to 属性的 params 值传递。在 About.vue 组件中，我们可以通过 $route.params.id 来获取该参数的值。
总结
本文介绍了如何使用 Vue Router 实现页面跳转的方法，包括路由配置、路由跳转和路由传参等。Vue Router 是 Vue.js 的官方路由管理器，它可以帮助我们实现页面跳转和路由控制，让我们更轻松地构建交互式的 Web 应用程序。希望本文对大家学习和使用 Vue.js 有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650c493395b1f8cacd650489