Vue實(shí)現(xiàn)帶參跳轉(zhuǎn)的方法

這篇文章主要介紹了Vue實(shí)現(xiàn)帶參跳轉(zhuǎn)的方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

主頁(yè)面：name —> shishengzuotanhuichaxun

此頁(yè)面表格中的數(shù)據(jù)均通過(guò)接口從后端獲取數(shù)組對(duì)象并渲染，每一行數(shù)據(jù)都有對(duì)應(yīng)的行id，我們的目的就是根據(jù)表格中每行數(shù)據(jù)的行id不同進(jìn)而跳轉(zhuǎn)至對(duì)應(yīng)的子詳情頁(yè)面

子頁(yè)面（詳情頁(yè)面）：name —> Cinfo

此頁(yè)面為拿到行id后通過(guò)調(diào)用相應(yīng)接口所要渲染的頁(yè)面

項(xiàng)目簡(jiǎn)介及使用帶參跳轉(zhuǎn)的原因：
本系統(tǒng)使用Vue進(jìn)行項(xiàng)目框架搭建，使用Vant移動(dòng)端框架的組件庫(kù)進(jìn)行開(kāi)發(fā)。主頁(yè)面中的表格使用了純?cè)鷋tml的th、tr、td實(shí)現(xiàn)，向表格渲染數(shù)據(jù)使用了vue指令v-for對(duì)tr進(jìn)行遍歷，所以渲染后的表格數(shù)據(jù)所對(duì)應(yīng)的所有詳情按鈕是同一個(gè)，點(diǎn)擊跳轉(zhuǎn)后的頁(yè)面也是同一個(gè)，這就違背了項(xiàng)目業(yè)務(wù)需求。所以帶參傳遞的實(shí)現(xiàn)就尤為關(guān)鍵，帶參傳遞操作的原理是使用了同一模板（Cinfo），但由于url路徑不同，各個(gè)子頁(yè)面中內(nèi)容可以互不影響。

實(shí)現(xiàn)過(guò)程：

step1：
在vue-router下的js文件中，將子詳情頁(yè)面的路由修改為：

在path屬性中加入’/:id‘，并新加name屬性，目的是實(shí)現(xiàn)在跳轉(zhuǎn)時(shí)將url后添加id，從而進(jìn)入不同的子詳情頁(yè)面

step2：
在主頁(yè)面中為詳情按鈕的綁定事件中加入?yún)?shù)，將v-for中item，即通過(guò)接口拿到的數(shù)組對(duì)象作為點(diǎn)擊事件方法中的形參。

注意：
1.@click=detail(item)， 為按鈕綁定單擊事件時(shí)item一定不要忘記在括號(hào)中加上item參數(shù)！

2.此處push()方法中path的key值使用了ES6語(yǔ)法–>模板字符串 （允許嵌入表達(dá)式的字符串字面量）

此時(shí)已經(jīng)實(shí)現(xiàn)了點(diǎn)擊詳情按鈕后將行id作為參數(shù)傳遞到了子詳情頁(yè)面中，如下圖：

step3：
下面我們就需要在子詳情頁(yè)面中拿到主頁(yè)面?zhèn)鬟f過(guò)來(lái)的id，作為請(qǐng)求參數(shù)調(diào)用接口并渲染數(shù)據(jù)。

實(shí)現(xiàn)獲取傳遞過(guò)來(lái)的id操作為：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue實(shí)現(xiàn)帶參跳轉(zhuǎn)的方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!