1. 程式人生 > 實用技巧 >this.$router.push、replace、go的區別

this.$router.push、replace、go的區別

1.this.$router.push()

描述:跳轉到不同的url,但這個方法會向history棧新增一個記錄,點選後退會返回到上一個頁面。

用法:

  this.$router.push('/index')
  this.$router.push({path:'/index'})
  this.$router.push({path:'/index',query:{name: '123'}})
  this.$router.push({name:'index',params:{name:'123'}})
 // 字串

  router.push('home')
  // 物件
  this.$router.push({path: '/login?url=' + this.$route.path});
  // 帶查詢引數,變成/backend/order?selected=2
  this.$router.push({path: '/backend/order', query: {selected: "2"}});
  // 命名的路由
  router.push({ name: 'user', params: { userId: 123 }})

  

2.this.$router.replace()

描述:同樣是跳轉到指定的url,但是這個方法不會向history裡面新增新的記錄,點選返回,會跳轉到上上一個頁面。上一個記錄是不存在的。

3.this.$router.go(n)

相對於當前頁面向前或向後跳轉多少個頁面,類似window.history.go(n)。n可為正數可為負數。正數返回上一個頁面

 //宣告式:
  <router-link :to="..." replace></router-link>
  // 程式設計式:
  router.replace(...)
  //push方法也可以傳replace
  this.$router.push({path: '/home', replace: true})