router.push(location)
在vue.js中想要跳轉(zhuǎn)到不同的 URL嗓蘑，需要使用 router.push 方法。
這個方法會向 history 棧添加一個新的記錄匿乃，當(dāng)用戶點擊瀏覽器后退按鈕時桩皿，則回到之前的 URL。
當(dāng)你點擊
<router-link>
時幢炸，這個方法會在內(nèi)部調(diào)用泄隔，所以說，點擊
<router-link :to="...">
等同于調(diào)用
router.push(...)
聲明式：
<router-link :to="...">
編程式：router.push(...)//該方法的參數(shù)可以是一個字符串路徑阳懂，或者一個描述地址的對象梅尤。
// 字符串
router.push('home')
// 對象
this.$router.push({path: '/login?url=' + this.$route.path});
// 帶查詢參數(shù)柜思，變成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
router.replace(location)
設(shè)置 replace 屬性（默認(rèn)值: false）的話岩调，當(dāng)點擊時，會調(diào)用 router.replace() 而不是 router.push()赡盘，于是導(dǎo)航后不會留下 history 記錄号枕。即使點擊返回按鈕也不會回到這個頁面。
加上replace: true后陨享，它不會向 history 添加新記錄葱淳，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 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艳狐。
兩者都可以傳遞參數(shù)，區(qū)別是什么皿桑？
- query 傳參配置的是path毫目，而params傳參配置的是name，在params中配置path無效
- query在路由配置不需要設(shè)置參數(shù)诲侮，而params必須設(shè)置
- query傳遞的參數(shù)會顯示在地址欄中
- params傳參刷新會無效镀虐，但是query會保存?zhèn)鬟f過來的值，刷新不變 ;
5.路由配置：
query 的寫法
{
path: '/home',
name: Home,
component: Home
}
params寫法：
{
path: '/home/：site/:bu',
name: Home,
component: Home
}
如果路由上面不寫參數(shù)沟绪，也是可以傳過去的刮便，但不會在url上面顯示出你的參數(shù)，并且當(dāng)你跳到別的頁面或者刷新頁面的時候參數(shù)會丟失绽慈，那依賴這個參數(shù)的http請求或者其他操作就會失敗
6,獲取路由參數(shù)
在接收的跳轉(zhuǎn)的頁面
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
上面就可以獲取到傳遞的參數(shù)了
}
}
注意：獲取路由上面的參數(shù)，用的是$route久信，后面沒有r
params是路由的一部分,必須要有窖杀。query是拼接在url后面的參數(shù)，沒有也沒關(guān)系裙士。
params一旦設(shè)置在路由入客，params就是路由的一部分，如果這個路由有params傳參腿椎，但是在跳轉(zhuǎn)的時候沒有傳這個參數(shù)桌硫，會導(dǎo)致跳轉(zhuǎn)失敗或者頁面會沒有內(nèi)容。
params啃炸、query不設(shè)置也可以傳參铆隘，但是params不設(shè)置的時候，刷新頁面或者返回參數(shù)會丟失南用，query并不會出現(xiàn)這種情況膀钠，這一點的在上面說過了
最后總結(jié)：
路由傳遞參數(shù)和傳統(tǒng)傳遞參數(shù)是一樣的，命名路由類似表單提交而查詢就是url傳遞裹虫，在vue項目中基本上掌握了這兩種傳遞參數(shù)就能應(yīng)付大部分應(yīng)用了肿嘲，最后總結(jié)為以下：
1.命名路由搭配params，刷新頁面參數(shù)會丟失
2.查詢參數(shù)搭配query筑公，刷新頁面數(shù)據(jù)不會丟失
3.接受參數(shù)使用this.$router后面就是搭配路由的名稱就能獲取到參數(shù)的值
