例如商品列表頁面前往商品詳情頁面，需要傳一個商品id;
<router-link :to="{path: 'detail', query: {id: 1}}">前往detail頁面</router-link>c頁面的路徑為http://localhost:8080/#/detail?id=1，可以看到傳了一個參數(shù)id=1，并且就算刷新頁面id也還會存在。此時在c頁面可以通過id來獲取對應的詳情數(shù)據(jù)，獲取id的方式是this.$route.query.idvue傳參方式有：query、params+動態(tài)路由傳參。
vue傳參方式有：query、params+動態(tài)路由傳參。說下兩者的區(qū)別：
????????query通過path切換路由，params通過name切換路由
// query通過path切換路由
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail頁面</router-link>
// params通過name切換路由
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail頁面</router-link>????????query通過this.$route.query來接收參數(shù)，params通過this.$route.params來接收參數(shù)。
// query通過this.$route.query接收參數(shù)
created () {
const id = this.$route.query.id;
}
// params通過this.$route.params來接收參數(shù)
created () {
const id = this.$route.params.id;
}????????query傳參的url展現(xiàn)方式：/detail?id=1&user=123&identity=1&更多參數(shù)?params＋動態(tài)路由的url方式：/detail/123
????????params動態(tài)路由傳參，一定要在路由中定義參數(shù)，然后在路由跳轉(zhuǎn)的時候必須要加上參數(shù)，否則就是空白頁面文章來源：http://www.zghlxwxcb.cn/news/detail-811261.html
{
path: '/detail/:id',
name: 'Detail',
component: Detail
},注意，params傳參時，如果沒有在路由中定義參數(shù)，也是可以傳過去的，同時也能接收到，但是一旦刷新頁面，這個參數(shù)就不存在了。這對于需要依賴參數(shù)進行某些操作的行為是行不通的，因為你總不可能要求用戶不能刷新頁面吧。例如：文章來源地址http://www.zghlxwxcb.cn/news/detail-811261.html
// 定義的路由中，只定義一個id參數(shù)
{
path: 'detail/:id',
name: 'Detail',
components: Detail
}
// template中的路由傳參，
// 傳了一個id參數(shù)和一個token參數(shù)
// id是在路由中已經(jīng)定義的參數(shù)，而token沒有定義
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail頁面</router-link>
// 在詳情頁接收
created () {
// 以下都可以正常獲取到
// 但是頁面刷新后，id依然可以獲取，而token此時就不存在了
const id = this.$route.params.id;
const token = this.$route.params.token;
}到了這里，關于列表進入詳情頁傳參問題（vue的問題）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
