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