在開發(fā)中稻扬，我們往往遇到需要跳轉(zhuǎn)頁面?zhèn)鲄韨鬟f數(shù)據(jù)，比如列表傳遞參數(shù)到詳情頁面羊瘩；詳情頁面的url為：
http://localhost:8080/#/detail?id=1
我們可以看到傳遞了參數(shù) id=1泰佳，在詳情頁面可以通過 this.$router.query.id 獲取，即使刷新當(dāng)前詳情頁面尘吗，id的值也不會(huì)消失逝她；
query 和 params兩者之間的區(qū)別：
1、query通過path切換路由睬捶，params通過name切換路由
<router-link :to="{path:'detail',query:{id:1}}"></router-link>
<router-link :to="{name:'detail',query:{id:1}}"></router-link>
2黔宛、query 通過this.router.params 來接收參數(shù)值
3擒贸、展現(xiàn)形式不一樣
query的展現(xiàn)url 是
/detail?id=2&user=123&更多
params+動(dòng)態(tài)路由 展現(xiàn)形式
/detail/123
4臀晃、params動(dòng)態(tài)路由傳遞參數(shù)需要注意地方
一定要在路由中定義參數(shù)，然后路由跳轉(zhuǎn)的時(shí)候一定要加上參數(shù)介劫，否則就是空白頁面
{
path: 'detail/:id',
name: 'Detail',
components: Detail
}
如果沒有在路由中定義參數(shù)徽惋，也是可以傳過去的，同時(shí)也能接收到蜕猫，但是一旦刷新頁面寂曹，這個(gè)參數(shù)就不存在了。這對(duì)于需要依賴參數(shù)進(jìn)行某些操作的行為是行不通的回右，因?yàn)槟憧偛豢赡芤笥脩舨荒芩⑿马撁姘陕≡病＠纾?/p>
// 定義的路由中，只定義一個(gè)id參數(shù)
{
path: 'detail/:id',
name: 'Detail',
components: Detail
}
// template中的路由傳參翔烁，
// 傳了一個(gè)id參數(shù)和一個(gè)token參數(shù)
// id是在路由中已經(jīng)定義的參數(shù)渺氧，而token沒有定義
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail頁面</router-link>
// 在詳情頁接收
created () {
// 以下都可以正常獲取到
// 但是頁面刷新后，id依然可以獲取蹬屹，而token此時(shí)就不存在了
const id = this.$route.params.id;
const token = this.$route.params.token;
}
