详解vue-router 2.0 常用基础知识点之router.push()

详解vue-router 2.0常用基础知识点之router.push()

1. 概述

router.push()是vue-router 2.0的一种基础跳转方式，用于在当前路由下添加一个新路由，并且将浏览器URL跳转到新路由地址，这是vue-router中最常用的一种跳转方式之一。

2. 语法

router.push(location, onComplete?, onAbort?)

1. location (type: Object | string): 目标路由的解析对象或路径
2. onComplete (type: Function): 跳转成功后需要执行的自定义回调函数
3. onAbort (type: Function): 在跳转被阻止时需要执行的自定义回调函数

3. 如何使用

• 通过路径跳转

我们可以使用一个包含目标路径的字符串作为router.push()里面的参数来实现路径跳转，例：

this.$router.push('/home');

• 通过命名路由跳转

我们可以使用一个包含目标命名路由的对象作为router.push()里面的参数来实现通过命名路由的方式进行跳转，例:

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

4. 注意事项

• 如果调用router.push()时在beforeEach和beforeResolve中return一个false或者调用next(false)，跳转将会被取消。
• 如果调用router.push()失败，会被console.error()方法提醒。

5. 示例说明

<template>
  <div>
    <!-- 通过按钮触发跳转 -->
    <button @click="goHome">回首页</button>
  </div>
</template>
<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/home');
    }
  }
};
</script>

<template>
  <div>
    <!-- 通过按钮触发跳转 -->
    <button @click="goHome">回首页</button>
  </div>
</template>
<script>
export default {
  methods: {
    goHome() {
      this.$router.push({ name: 'home' });
    }
  }
};
</script>