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

// 物件
router.push({ path: 'home' })

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

// 帶查詢引數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 會被忽略，上述例子中的 query 並不屬於這種情況。取而代之的是下面例子的做法，你需要提供路由的 name

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這裡的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

router.replace(location, onComplete?, onAbort?)

跟 router.push

router.go(n)

// 在瀏覽器記錄中前進一步，等同於 history.forward()
router.go(1)

// 後退一步記錄，等同於 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 如果 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

<template>
    <div>
      這是商品列表頁面
      <router-link :to="{ name: 'title'}">標題</router-link>
      <router-link to="/goods/image">圖片</router-link>
      <router-view/>
      <router-link v-bind:to="{path: '/cart'}">跳轉到購物車頁面</router-link>
      <button v-on:click.prevent="routerGo">跳轉到購物車頁面</button>
    </div>
</template>

<script>
export default {
  name: 'GoodsList',
  data () {
    return {
    }
  },
  methods: {
    routerGo () {
      // this.$router.push('/cart')
      // this.$router.replace('/cart')
      // this.$router.push({name: 'cart'})
      // this.$router.push({path: '/cart'})
      // this.$router.push({path: '/cart?goodsId=123'})
      // this.$router.push({path: '/cart', query: {goodsId: '123'}})
      this.$router.push({name: 'cart', params: {goodsId: '123'}})
    }
  },
  beforeRouteEnter (to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前呼叫
    // 不！能！獲取元件例項 `this`
    // 因為當守衛執行前，元件例項還沒被建立
    next(vm => {
      // 通過 `vm` 訪問元件例項
      // console.log(vm)
    })
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該元件被複用時呼叫
    // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。
    // 可以訪問元件例項 `this`
    // this.name = to.params.name
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時呼叫
    // 可以訪問元件例項 `this`
    // const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
    // if (answer) {
    //   next()
    // } else {
    //   next(false)
    // }
    next()
  }
}
</script>

<style scoped>

</style>
 

<template>
    <div>
      購物車頁面
      <a href="" v-on:click.prevent="historyGo">返回</a>
      <p>
        <span>{{$route.query.goodsId}}</span>
        <span>{{$route.params.goodsId}}</span>
      </p>
    </div>
</template>

<script>
export default {
  name: 'Cart',
  methods: {
    historyGo () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>

</style>