Vue 列表頁帶參數(shù)進(jìn)詳情頁的操作(router-link)
首先,仔細(xì)看文檔!!!一點(diǎn)一點(diǎn)的踩坑過來的~~~
這里介紹params和query兩種方法
1.用params傳參
列表頁:
<router-link :to='{ name:’msgDetail’, params: {id: item.msg_id} }'>(注意:用params傳參這里是命名路由,用name)
</router-link>
路由配置如下:
export default new Router({routes: [ { path: ’/msgDetail/:id’, name: ’msgDetail’, component: msgDetail }]
詳情頁接收參數(shù):
this.$route.params.id(注意:這里是$route,而不是$router)
2.用query傳參
列表組件:
<router-link :to='{ path: ’/msgDetail’, query: {id: item.msg_id} }'>(注意:用query傳參這里是帶查詢參數(shù),用path)
</router-link>
路由配置如下:
export default new Router({routes: [ { path: ’/msgDetail’, name: ’msgDetail’, component: msgDetail }]
詳情頁接收參數(shù):
this.$route.query.id(注意:這里是$route,而不是$router)
補(bǔ)充知識(shí):vue+element解決點(diǎn)擊table列表的從詳情或修改頁面跳轉(zhuǎn)路由到列表頁總是跳轉(zhuǎn)到第一頁,而不能跳轉(zhuǎn)到當(dāng)前頁的問題
思路:
將當(dāng)前頁的頁碼currentPage存入session,然后點(diǎn)擊詳情跳轉(zhuǎn)到詳情頁面,然后,再次返回當(dāng)前頁的時(shí)候,在created生命周期里,獲取到存儲(chǔ)的currentPage,再進(jìn)行加載









以上這篇Vue 列表頁帶參數(shù)進(jìn)詳情頁的操作(router-link)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. PHP使用Swagger生成好看的API文檔2. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條3. Python3 json模塊之編碼解碼方法講解4. Python 制作查詢商品歷史價(jià)格的小工具5. Python 如何調(diào)試程序崩潰錯(cuò)誤6. Python 利用Entrez庫篩選下載PubMed文獻(xiàn)摘要的示例7. ASP基礎(chǔ)知識(shí)VBScript基本元素講解8. python使用jenkins發(fā)送企業(yè)微信通知的實(shí)現(xiàn)9. Python sublime安裝及配置過程詳解10. Python 合并拼接字符串的方法

網(wǎng)公網(wǎng)安備