this.$router.push/replace/go

vue的编程式导航

1. this.$router.push

• 简介

可以导航到不同的 URL。
会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL（页面）。

• 写法

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

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

// 命名的路由  -> /home/hszz
this.$router.push({ name: 'home', params: { userId: 'hszz' }})

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

2. this.$router.replace

• 简介

可以导航到不同的 URL。
替换history栈中最后一个记录，点击后退会返回至上上一个URL（页面）

• 写法
  和push一样

3. this.$router.go

• 简介

参数是整数，意思是在 history 记录中向前或者后退多少步，
即向前/向后跳转n个页面
类似 window.history.go(n)。

• 写法

// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1)

// 后退一步记录，等同于 history.back()
this.$router.go(-1)

// 前进 3 步记录
this.$router.go(3)

官网地址 https://router.vuejs.org/zh/guide/essentials/navigation.html

在目标页面获取参数

this.$route.query

• 对应 this.$router.push({ path: 'home', query: { plan: 'hszz' }})

this.$route.query.plan // hszz

this.$route.params

• 对应 this.$router.push({ name: 'home', params: { userId: 'hszz' }})

this.$route.params.userId// hszz