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后面就是搭配路由的名稱就能獲取到參數的值