最近空閑一段時(shí)間友扰，就沒事看了看vue-router的一些知識(shí)，想起了之前做項(xiàng)目遇到的一些不解赚爵，也就是當(dāng)初剛?cè)腴T餐弱，文檔看的不詳細(xì)宴霸，理解的不全面導(dǎo)致的。現(xiàn)在雖然不怎么會(huì)犯這樣的錯(cuò)誤了膏蚓，但是還是寫下來瓢谢，記錄一下，也方便有需要的朋友查閱驮瞧，共勉吧氓扛。如果能幫到你，那就更好了...
/data/:id這個(gè)路由匹配/data/1,/data/2這里的 id 叫 params
/data?id=1 /data?id=2 這里的 id 叫 query
當(dāng)你使用params方法傳參的時(shí)候论笔，要在路由后面加參數(shù)名采郎，并且傳參的時(shí)候，參數(shù)名要跟路由后面設(shè)置的參數(shù)名對(duì)應(yīng)狂魔。使用query方法蒜埋，就沒有這種限制，直接在跳轉(zhuǎn)里面用就可以最楷。
這句話怎么理解呢整份？看下邊：
如果你要使用params傳參，那么你的路由頁(yè)面index.js必須帶上參數(shù)籽孙，如下
{
path: '/detail/:id/',
name: "detail",
component: detail//這個(gè)details是傳進(jìn)來的組件名稱
}
使用：
方法1：<router-link :to="{ name: 'details', params: { id: 123 }}">點(diǎn)擊按鈕</router-link>
方法2：this.$router.push({name:'details',params:{id:123}})
頁(yè)面url顯示結(jié)果是：http://localhost:8081/#/details/123
如果你要使用query傳參烈评，那么你的路由頁(yè)面index.js必須帶上參數(shù)，如下
{
path: '/detail',//這里不需要參入?yún)?shù)犯建，參見上面的params寫法
name: "detail",
component: detail//這個(gè)details是傳進(jìn)來的組件名稱
}
使用：
方法1：<router-link :to="{ name: 'details', query: { id: 123 }}">點(diǎn)擊按鈕</router-link>
方法2：this.$router.push({name:'details',query:{id:123}})
方法3：<router-link :to="{ path: 'details', query: { id: 123 }}">點(diǎn)擊按鈕</router-link>
方法4：this.$router.push({path:'details',query:{id:123}})
頁(yè)面url顯示結(jié)果是：http://localhost:8081/#/details?id=123
這里看方法3,4,其實(shí)是對(duì)應(yīng)方法1,2的讲冠，也就是說使用query方法，可以與path和name共用适瓦，2個(gè)都可以竿开，但是params只能對(duì)應(yīng)name。
要是想獲取參數(shù)值：各自的獲取方法是：
query和params分別是：this.$route.query.id玻熙，this.$route.params.id
順便說一些參數(shù)是多個(gè)的情況
params傳參否彩，如果路由index.js如下：
{
path: '/detail/:id/:name',
name: "detail",
component: detail//這個(gè)details是傳進(jìn)來的組件名稱
}
那么跳轉(zhuǎn)寫法：this.$router.push({name:'detail',params:{id:123,name:'lisi'}})
效果：http://localhost:8081/#/details/123/lisi
query的寫法參考上面。
query跟params揭芍，前者在瀏覽器地址欄中顯示參數(shù)胳搞，后者則不顯示卸例。
