vue 之this.$router.replace和this.$router.push的區別

this.$router.push

1.跳轉到指定URL，向history棧添加一個新的記錄，點擊后退會返回至上一個頁面

2.聲明式

  <router-link :to="....">

  編程式

  router.push(...)//該方法的參數可以是一個字符串路徑，或者一個描述地址的對象。

  

  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 }})

 this.$router.replace

1.跳轉到指定URL，替換history棧中最后一個記錄，點擊后退會返回至上上一個頁面

(A----->B----->C   結果B被C替換    A----->C)

2.設置 replace 屬性（默認值: false）的話，當點擊時，會調用 router.replace() 而不是 router.push()，於是導航后不會留下 history 記錄。即使點擊返回按鈕也不會回到這個頁面

加上replace: true后，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。

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

兩種傳參方式

query: 
    this.$router.push({
      path: '/home',
      query: {
        site: [],
        bu: []
      }
    })
params:
  this.$router.push({
    name: 'Home',  // 路由的名稱
    params: {
      site: [],
      bu: []
    }
  })
params：/router1/:id ，/router1/123，/router1/789 ,這里的id叫做params
query：/router1?id=123 ,/router1?id=456 ,這里的id叫做query。

兩者都可以傳遞參數，區別是什么？

query 傳參配置的是path，而params傳參配置的是name，在params中配置path無效

query在路由配置不需要設置參數，而params必須設置

query傳遞的參數會顯示在地址欄中

params傳參刷新會無效，但是query會保存傳遞過來的值，刷新不變 ;

路由的配置

query:
  {
  path: '/home',
  name: Home,
  component: Home
  }
  params:
  {
  path: '/home/：site/:bu',
  name: Home,
  component: Home
  }

 

如果路由上面不寫參數，也是可以傳過去的，但不會在url上面顯示出你的參數，並且當你跳到別的頁面或者刷新頁面的時候參數會丟失，那依賴這個參數的http請求或者其他操作就會失敗

在接收跳轉的頁面獲取路由參數：

created () {
let self = this
self.getParams()
},
watch () {
'$route': 'getParams'
},
methods: {
  getParams () {
  let site = this.$route.query.site
  let bu = this.$route.query.bu
  // 如果是params 傳參，那就是this.$route.params.site
  上面就可以獲取到傳遞的參數了
 }

 

 注意：獲取路由上面的參數，用的是$route，后面沒有r

params是路由的一部分,必須要有。query是拼接在url后面的參數，沒有也沒關系。

params一旦設置在路由，params就是路由的一部分，如果這個路由有params傳參，但是在跳轉的時候沒有傳這個參數，會導致跳轉失敗或者頁面會沒有內容。

params、query不設置也可以傳參，但是params不設置的時候，刷新頁面或者返回參數會丟失，query並不會出現這種情況，這一點的在上面說過.

this.$router.go(n)

1.類似window.history.go(n)，向前或向后跳轉n個頁面，n可正（先后跳轉）可負（向前跳轉）

2.this.$router.go(1)    //類似history.forward()

  this.$router.go(-1)   //類似history.back()

  最后總結：

路由傳遞參數和傳統傳遞參數是一樣的，命名路由類似表單提交而查詢就是url傳遞：

1.命名路由搭配params，刷新頁面參數會丟失

2.查詢參數搭配query，刷新頁面數據不會丟失

3.接收參數使用this.$router后面就是搭配路由的名稱就能獲取到參數的值