【Vue Router】007-编程式导航

1.7 编程式导航

1.7.1 概述

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

方法格式：router.push(location, onComplete?, onAbort?)

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

1.7.2 push 方法的参数

字符串路径、描述地址的对象、命名路由、带查询参数的描述地址的对象、以及使用 hash。

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

// 使用 hash ，结果是 /about#team
router.push({ path: 'about', hash: '#team'})

**注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。**那么对于 /book/:id 这种形式的路径，使用 router.push() 方法，有两种写法：一种方法是通过命名路由，另一种方法是在 path 中提供带参数的完整路径。

const id = 1
// 方法一：命名路由
router.push({ name: 'user', params: { userId: '123' }}) // -> /book/1
// 方法二：在 path 参数中提供带参数的完整路径
router.push({ path: 'book/${id}' }) // -> /book/1

router.push() 方法和所有其他的导航方法都返回一个 Promise ，允许等待直到导航完成，并知道结果是成功还是失败。

1.7.3 push 方法代码演示

第一步：修改 Study.vue

这里使用 vue3 语法，另外可以直接在页面模板里面使用 $router.push('videos') 进行页面跳转

注意：@click 需要使用 .prevent 修饰符来阻止 a 标签的默认行为

<template>
  <router-link to="/">主页</router-link>
  <router-link :to="{ name: 'news' }">新闻</router-link>
  <router-link :to="{ name: 'books' }">图书</router-link>
  <!-- <router-link :to="{ name: 'videos' }">视频</router-link> -->
  <!-- 我们把视频的挑战方式改写成使用 router.push() 的方式 -->
  <a href="#" @click.prevent="getRoute('videos')">视频</a>
  <!-- 也可以这么写 -->
  <!-- <a href="#" @click.prevent="$router.push('videos')">视频</a> -->
  <div>=================</div>
  <router-view />
</template>

<script>

// 导入 router
// 在 vue2 中，直接可以使用 this.$router.push()
import { useRouter } from 'vue-router'

export default {
  el: 'Study',
  setup () {
    // 我们这里使用 vue3 的方式使用 route
    const router = useRouter()
    const getRoute = path => {
      router.push(path)
    }
    return { getRoute }
  }
}
</script>

<style>
</style>

第二步：运行结果，符合预期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bLFfuGYK-1641036617145)(image-20210622145421372.png)]

1.7.4 replace 等其它方法

router.replace

与 router.replace 的区别是页面跳转不会记录到 history 记录中，就是将当前页面替换为目标页面；

对应的声明式写法：

<router-link :to="{ name: 'videos' }" replace>视频</router-link>

与 window.history 对象的 forward() 、back() 、和 go() 对应的方法

router.forward()
router.back()
router.go(n)