Vue.js 中使用 Vue Router 实现页面跳转的方法-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 是一个流行的前端框架，它的核心是数据驱动视图，让开发者可以更轻松地构建交互式的 Web 应用程序。Vue Router 是 Vue.js 的官方路由管理器，它可以帮助我们实现页面跳转和路由控制。在本文中，我们将介绍如何使用 Vue Router 实现页面跳转的方法，包括路由配置、路由跳转和路由传参等。

路由配置

在使用 Vue Router 实现页面跳转之前，我们需要先进行路由配置。路由配置是指告诉 Vue Router 哪些 URL 对应哪些组件，以及如何传递参数。在 Vue.js 中，我们可以通过创建一个路由实例来进行路由配置，例如：

// javascriptcn.com 代码示例
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about/:id', component: About, props: true }
]

const router = new VueRouter({
  routes
})

export default router

在上面的代码中，我们先引入了 Vue、VueRouter 以及我们需要的组件。接着，我们定义了一个 routes 数组，其中包含两个对象，分别表示两个路由：'/' 和 '/about/:id'。其中，'/' 表示根路由，即默认路由，它对应的组件是 Home.vue；'/about/:id' 表示带参数的路由，其中 :id 表示参数，它对应的组件是 About.vue。在第二个路由中，我们设置了 props: true，表示将路由参数作为组件的 props 传递。最后，我们创建了一个 router 实例，并将 routes 对象传递给它。

路由跳转

在路由配置完成之后，我们就可以使用 Vue Router 实现页面跳转了。在 Vue.js 中，我们可以通过编写代码来触发路由跳转。例如：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link :to="{ name: 'about', params: { id: 1 }}">About</router-link>
  </div>
</template>

在上面的代码中，我们使用了 router-link 组件来生成链接。第一个链接表示跳转到根路由，即 Home.vue 组件；第二个链接表示跳转到带参数的路由，即 About.vue 组件，并传递了一个 id 参数。另外，我们也可以使用编程式导航来实现路由跳转，例如：

// javascriptcn.com 代码示例
// 在组件中
this.$router.push('/')
this.$router.push({ name: 'about', params: { id: 1 } })

// 在脚本中
import router from './router'

router.push('/')
router.push({ name: 'about', params: { id: 1 } })

在上面的代码中，我们使用了 this.$router.push() 方法和 router.push() 方法来触发路由跳转。其中，'/' 表示跳转到根路由，即 Home.vue 组件；{ name: 'about', params: { id: 1 } } 表示跳转到带参数的路由，即 About.vue 组件，并传递了一个 id 参数。

路由传参

在路由跳转时，我们经常需要传递一些参数给目标组件，以便目标组件进行相应的处理。在 Vue.js 中，我们可以通过路由配置和路由跳转来实现路由传参。在路由配置中，我们可以使用 props 属性来将路由参数作为组件的 props 传递，例如：

const routes = [
  { path: '/', component: Home },
  { path: '/about/:id', component: About, props: true }
]

在上面的代码中，我们将 props 属性设置为 true，表示将路由参数作为组件的 props 传递。在 About.vue 组件中，我们可以通过 props 属性来接收路由参数，例如：

export default {
  name: 'About',
  props: ['id'],
  // ...
}

在上面的代码中，我们定义了一个 props 数组，其中包含一个 id 参数。在组件中，我们可以通过 this.id 来获取该参数的值。

除了使用 props 属性来传递路由参数之外，我们还可以使用路由跳转时的 to 属性来传递参数，例如：

<router-link :to="{ name: 'about', params: { id: 1 }}">About</router-link>

在上面的代码中，我们将路由参数作为 to 属性的 params 值传递。在 About.vue 组件中，我们可以通过 $route.params.id 来获取该参数的值。

总结

本文介绍了如何使用 Vue Router 实现页面跳转的方法，包括路由配置、路由跳转和路由传参等。Vue Router 是 Vue.js 的官方路由管理器，它可以帮助我们实现页面跳转和路由控制，让我们更轻松地构建交互式的 Web 应用程序。希望本文对大家学习和使用 Vue.js 有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650c493395b1f8cacd650489