之前我们学过使用<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() 

这个功能大家也一定要熟悉。