编程式的导航

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

导航到不同的位置

通过在历史堆栈中推送一个entry，以编程方式导航到一个新的 URL。

函数签名：

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

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

当你点击时，这个方法会在内部调用，所以说，点击等同于调用router.push(...)。

router.push()方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

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

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

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

你需要提供路由的name或手写完整的带有参数的path：

const username = 'eduardo'

// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo

// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo

// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

由于属性to与router.push接受的对象种类相同，所以两者的规则完全相同。

router.push和所有其他导航方法都会返回一个Promise，让我们可以等到导航完成后才知道是成功还是失败。

替换当前位置

通过替换历史堆栈中的当前entry，以编程方式导航到一个新的 URL。

函数签名：

跟router.push很像，唯一的不同就是，它不会向history添加新记录，而是替换当前的条目。

也可以直接在传递给router.push的routeLocation中增加一个属性replace: true：

router.push({ path: '/home', replace: true })

// 相当于
router.replace({ path: '/home' })

横跨历史

允许你在历史中前进或后退。

函数签名：

这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)。

向前移动一条记录：

router.go(1)

等价
router.forward()

返回一条记录：

router.go(-1)

等价
router.back()

前进 3 条记录

router.go(3)

如果没有那么多记录，静默失败

router.go(-100)
router.go(100)

操作 History

用于路由实现历史记录。大多数 web 应用程序都应该使用createWebHistory()，但它要求正确配置服务器。你还可以使用createWebHashHistory()的基于 hash 的历史记录，它不需要在服务器上进行任何配置，但是搜索引擎根本不会处理它，在 SEO 上表现很差。

函数签名：

createRouter({ history: createWebHistory(),
  // 其他配置...
})

你也许注意到router.push、router.replace和router.go跟window.history.pushState、window.history.replaceState和window.history.go好像，实际上它们确实是效仿window.history API 的。

因此，如果你已经熟悉 Browser History APIs，那么在 Vue Router 中操作 history 就是超级简单的。

值得一提的是，无论在创建路由器实例时传递什么样的history配置，Vue Router的导航方法（push、replace、go），都能始终如一地工作。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com