VUE的兩種跳轉push和replace對比區別

BothEyes1993發表於2018-12-14
Vue

router.push(location)

在vue.js中想要跳轉到不同的 URL，需要使用 router.push 方法。

這個方法會向 history 棧新增一個新的記錄，當使用者點選瀏覽器後退按鈕時，則回到之前的 URL。

當你點選

<
router-link>
複製程式碼

時，這個方法會在內部呼叫，所以說，點選

<
router-link :to="...">
複製程式碼

等同於呼叫

router.push(...)複製程式碼

宣告式：

<
router-link :to="...">
複製程式碼

程式設計式：router.push(…)//該方法的引數可以是一個字串路徑，或者一個描述地址的物件。

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

router.replace(location)

設定 replace 屬性（預設值: false）的話，當點選時，會呼叫 router.replace() 而不是 router.push()，於是導航後不會留下 history 記錄。即使點選返回按鈕也不會回到這個頁面。

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

//宣告式：<
router-link :to="..." replace>
<
/router-link>
// 程式設計式:router.replace(...)//push方法也可以傳replacethis.$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。

兩者都可以傳遞引數，區別是什麼？

  1. query 傳參配置的是path，而params傳參配置的是name，在params中配置path無效
  2. query在路由配置不需要設定引數，而params必須設定
  3. query傳遞的引數會顯示在位址列中
  4. params傳參重新整理會無效，但是query會儲存傳遞過來的值，重新整理不變 ;

5.路由配置：

query 的寫法

{path: '/home',name: Home,component: Home
  }複製程式碼

params寫法：

{path: '/home/：site/:bu',name: Home,component: Home
  }複製程式碼

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

6,獲取路由引數

在接收的跳轉的頁面

created () {let self = thisself.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並不會出現這種情況，這一點的在上面說過了

最後總結：

路由傳遞引數和傳統傳遞引數是一樣的，命名路由類似表單提交而查詢就是url傳遞，在vue專案中基本上掌握了這兩種傳遞引數就能應付大部分應用了，最後總結為以下：

1.命名路由搭配params，重新整理頁面引數會丟失

2.查詢引數搭配query，重新整理頁面資料不會丟失

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

來源：https://juejin.im/post/5c139fed6fb9a049ab0d80dc

相關文章