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

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=2
this.$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方法也能夠傳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。

二者均可以傳遞參數，區別是什麼？

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 = 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並不會出現這種狀況，這一點的在上面說過了

最後總結：

路由傳遞參數和傳統傳遞參數是同樣的，命名路由相似表單提交而查詢就是url傳遞，在vue項目中基本上掌握了這兩種傳遞參數就能應付大部分應用了，最後總結爲如下：

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

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

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