之前我们学过使用<router-link>和this.$router.push()两种方式跳转页面，其实这两种方式还有更丰富的功能，我们这节课来了解一下
1）直接传递路径的字符串
这种就是我们以前用的方式
this.$router.push('/list')
router方式
<router-link to="/list">点击跳转到列表页</router-link>
<router-link>方式
2)使用对象方式
this.$router.push({
path: '/list',
})
router方式
<router-link
:to="{
path: '/list',
}"
>
点击跳转到列表页
</router-link>
<router-link>方式
这里注意to前面加了冒号，因为这里是动态绑定了一个对象
3)使用name属性
this.$router.push({
name: 'list',
})
router方式
<router-link
:to="{
name: 'list',
}"
>
点击跳转到列表页
</router-link>
<router-link>方式
4)跳转时添加参数
this.$router.push({
name: 'userDetail',
params: {
id: item.id,
},
query: {
name: item.name,
},
})
router方式
<router-link
:to="{
name: 'userDetail',
params: {
id: item.id,
},
query: {
name: item.name,
},
}"
>
点击跳转到列表页
</router-link>
使用replace替换当前历史记录
在上面的方式中，我们都是新增了一条历史记录，比如我们原来在首页，点击跳转到了列表页，这时候浏览器的历史记录就有有两条，点击浏览器的后退按钮，就是返回首页
但是有时我们不想要这样的效果，希望到列表页以后历史记录还是1，点击返回也不能返回首页
这是我们就要用到replace这个属性
router.push({ path: '/list', replace: true })
只要在调用的时候，添加replace为true就行了
在<router-link>中也是可以用的
<router-link to="/list" replace></router-link>
这样list页面就会替换首页，并且不会新增浏览器的历史记录
这也是在工作中常用的一个功能，大家一定要记住
在浏览器的历史记录中跳转
虽然我们通过代码不能知道浏览器的历史记录，但是浏览器提供了window.history.go(n)，这个方法，可以让我们控制浏览器历史记录前进和后退，跟window.history.go(n)类似，vue-router也提供类似的功能
// 向前移动一条记录，与 router.forward() 相同
router.go(1)
// 返回一条记录，与router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)
这个功能也是很常用的，比如说我们在做移动端项目时，经常会做一个顶部状态栏，状态栏里有一个返回按钮
点击这个箭头的是，我们就可以调用
router.go(-1)
// 或者
router.back()
这个功能大家也一定要熟悉。
