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)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- Vue實(shí)現(xiàn)一個(gè)無限加載列表功能
- vue 公共列表選擇組件,引用Vant-UI的樣式方式
- vue實(shí)現(xiàn)前端列表多條件篩選
- vue實(shí)現(xiàn)點(diǎn)擊按鈕“查看詳情”彈窗展示詳情列表操作
- 關(guān)于vue的列表圖片選中打鉤操作
- vue-列表下詳情的展開與折疊案例
- vue v-for出來的列表,點(diǎn)擊某個(gè)li使得當(dāng)前被點(diǎn)擊的li字體變紅操作
- vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表
- vue實(shí)現(xiàn)列表滾動(dòng)的過渡動(dòng)畫
- 如何讓vue長列表快速加載
相關(guān)文章
解決mpvue + vuex 開發(fā)微信小程序vuex輔助函數(shù)mapState、mapGetters不可用問題
這篇文章主要介紹了解決mpvue + vuex 開發(fā)微信小程序 vuex輔助函數(shù)mapState、mapGetters不可用問題,需要的朋友可以參考下2018-08-08使用imba.io框架得到比 vue 快50倍的性能基準(zhǔn)
imba 是一種新的編程語言,可以編譯為高性能的 JavaScript。可以直接用于 Web 編程(服務(wù)端與客戶端)開發(fā)。這篇文章主要介紹了使用imba.io框架,得到比 vue 快50倍的性能基準(zhǔn),需要的朋友可以參考下2019-06-06vue3使用vueup/vue-quill富文本、并限制輸入字?jǐn)?shù)的方法處理
這篇文章主要介紹了vue3使用vueup/vue-quill富文本、并限制輸入字?jǐn)?shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況
這篇文章主要介紹了vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue多布局模式實(shí)現(xiàn)方法詳細(xì)講解
這篇文章主要介紹了Vue多布局模式實(shí)現(xiàn)方法,多布局模式可以根據(jù)用戶角色所在場景切換頁面布局,是非常常見的基礎(chǔ)功能,感興趣的同學(xué)可以參考下文2023-05-05