Vue this.$router.push(参数)实现页面跳转操作

当我们使用Vue.js构建单页面应用时，有时需要在不同的页面之间进行路由跳转。Vue Router提供了一些方法来实现这一功能，其中之一是$this.$router.push()方法。以下是关于如何使用$this.$router.push()方法实现页面跳转操作的完整攻略。

前置准备

要使用Vue Router，需先安装Vue Router模块并配置路由。

安装:

$ npm install vue-router

配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

此处，我们创建了两个路由：一个是根路由，一个是/about路由，它们分别对应着Home和About组件。

Vue this.$router.push(参数) 方法详解

参数

Vue.js的$this.$router.push()方法的参数可以是以下三种类型：

• 字符串（path）
• 命名的路由（name）
• 路由对象（route）

示例1

我们假设当前页面的URL是http://localhost:8080/，现在需要跳转到/about页面。

方法1：使用$path参数

this.$router.push('/about')

方法2：使用命名的路由

this.$router.push({ name: 'about' })

这两种方法都会将浏览器URL地址（history）更改为http://localhost:8080/about，并加载About组件。

示例2

我们现在将参数改为路由对象。

this.$router.push({ path: '/about' })

这个方法与第一种方法相同，只是传入的是一个带有"path"属性的对象而非字符串。