shisheng..."/>
您好,登錄后才能下訂單哦!
這篇文章主要介紹Vue項目中如何實現(xiàn)帶參跳轉(zhuǎn)功能,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
主頁面:name —> shishengzuotanhuichaxun
此頁面表格中的數(shù)據(jù)均通過接口從后端獲取數(shù)組對象并渲染,每一行數(shù)據(jù)都有對應(yīng)的行id,我們的目的就是根據(jù)表格中每行數(shù)據(jù)的行id不同進(jìn)而跳轉(zhuǎn)至對應(yīng)的子詳情頁面
子頁面(詳情頁面):name —> Cinfo
此頁面為拿到行id后通過調(diào)用相應(yīng)接口所要渲染的頁面
本系統(tǒng)使用Vue進(jìn)行項目框架搭建,使用Vant移動端框架的組件庫進(jìn)行開發(fā)。主頁面中的表格使用了純原生html的th、tr、td實現(xiàn),向表格渲染數(shù)據(jù)使用了vue指令v-for對tr進(jìn)行遍歷,所以渲染后的表格數(shù)據(jù)所對應(yīng)的所有詳情按鈕是同一個,點擊跳轉(zhuǎn)后的頁面也是同一個,這就違背了項目業(yè)務(wù)需求。所以帶參傳遞的實現(xiàn)就尤為關(guān)鍵,帶參傳遞操作的原理是使用了同一模板(Cinfo),但由于url路徑不同,各個子頁面中內(nèi)容可以互不影響。
在vue-router下的js文件中,將子詳情頁面的路由修改為:
在path屬性中加入'/:id‘,并新加name屬性,目的是實現(xiàn)在跳轉(zhuǎn)時將url后添加id,從而進(jìn)入不同的子詳情頁面
在主頁面中為詳情按鈕的綁定事件中加入?yún)?shù),將v-for中item,即通過接口拿到的數(shù)組對象作為點擊事件方法中的形參。
注意:
1.@click=detail(item), 為按鈕綁定單擊事件時item一定不要忘記在括號中加上item參數(shù)!
2.此處push()方法中path的key值使用了ES6語法–>模板字符串 (允許嵌入表達(dá)式的字符串字面量)
此時已經(jīng)實現(xiàn)了點擊詳情按鈕后將行id作為參數(shù)傳遞到了子詳情頁面中,如下圖:
下面我們就需要在子詳情頁面中拿到主頁面?zhèn)鬟f過來的id,作為請求參數(shù)調(diào)用接口并渲染數(shù)據(jù)。
實現(xiàn)獲取傳遞過來的id操作為:
固定寫法,別問,問就是不會(求助大佬們解答!)。。。
至此,我們已經(jīng)實現(xiàn)了帶參跳轉(zhuǎn)功能的大部分操作,剩下在子頁面中通過id調(diào)用接口并渲染數(shù)據(jù)就不展示了
以上是“Vue項目中如何實現(xiàn)帶參跳轉(zhuǎn)功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。