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è)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 解決ajax請(qǐng)求后臺(tái),有時(shí)收不到返回值的問題2. ASP.NET MVC通過勾選checkbox更改select的內(nèi)容3. ASP中實(shí)現(xiàn)字符部位類似.NET里String對(duì)象的PadLeft和PadRight函數(shù)4. Python使用oslo.vmware管理ESXI虛擬機(jī)的示例參考5. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁6. asp知識(shí)整理筆記4(問答模式)7. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼8. 使用AJAX(包含正則表達(dá)式)驗(yàn)證用戶登錄的步驟9. jsp+mysql實(shí)現(xiàn)網(wǎng)頁的分頁查詢10. ASP基礎(chǔ)知識(shí)Command對(duì)象講解
