Vue項目三級聯(lián)動路由跳轉(zhuǎn)與傳參的思路詳解
三級聯(lián)動組件的路由的跳轉(zhuǎn)與傳參
三級聯(lián)動,用戶可以點擊的:一級分類、二級分類和三級分類
以商城項目為例,Home模塊跳轉(zhuǎn)到Search模塊,以及會把用戶選中的產(chǎn)品(產(chǎn)品名字、產(chǎn)品ID)在路由跳轉(zhuǎn)的時候,進(jìn)行傳遞。
路由跳轉(zhuǎn)
- 聲明式導(dǎo)航:router-link
- 編程式導(dǎo)航:push | replace
聲明式導(dǎo)航
- router-link 來替換a標(biāo)簽跳轉(zhuǎn)(不推薦)

- 但是當(dāng)鼠標(biāo)進(jìn)入三級聯(lián)動,上下滑動的時候,會出現(xiàn)卡頓現(xiàn)象。
原因:router-link是一個組件,當(dāng)服務(wù)器的數(shù)據(jù)返回后,循環(huán)出很多router-link組件創(chuàng)建實例1000+,創(chuàng)建組件實例的時候,一瞬間創(chuàng)建很多組件很耗內(nèi)存,因此出現(xiàn)卡頓現(xiàn)象。
編程時導(dǎo)航(常使用)
綁定點擊事件

點擊事件一個方法

- 點擊確實能夠?qū)崿F(xiàn)跳轉(zhuǎn),而且沒有卡頓的現(xiàn)象。
- 但是這種方法也不是最好的
- 原因是:因為每一個a標(biāo)簽都綁定了一個@click函數(shù),因為這個三級聯(lián)動,要循環(huán),可能會有1000+次,所以相當(dāng)于綁定1000+@click回調(diào)函數(shù),那么1000個回調(diào)函數(shù)。
事件委派+編程式導(dǎo)航(最佳方法)
事件委派:把原來加給子元素身上的事件綁定在父元素身上,就是把時間委派給父元素。比如說,鼠標(biāo)點擊事件,本來頁面上有很多的鼠標(biāo)點擊事件,需要一個個的去寫實現(xiàn)函數(shù),但是如果你把鼠標(biāo)點擊事件交給上司來完成,那么就是鼠標(biāo)點擊那里的時候,就相當(dāng)于上司找對應(yīng)的下屬來完成此事件,而不像前面一個個的去找實現(xiàn)函數(shù)。
<ul id="ul1" >
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
如果給每個li添加點擊事件:
var li=document.getElementsByTagName('li');
function A(){
alert(li.innerHTML);
};
li.click=A;但是事件委派有兩個弊端:很耗費(fèi)資源;如果后期動態(tài)添加li,不會擁有這個彈出事件。
事件委派+編程式導(dǎo)航 實現(xiàn)三級聯(lián)動
利用事件的委派
- 在三級聯(lián)動的父元素的div綁定一個@click=“goSearch”
<!-- 利用事件委派和編程式導(dǎo)航實現(xiàn)路由跳轉(zhuǎn)和傳參--> <div class="all-sort-list2" @click="goSearch">
methods這樣寫:
methods:{
goSearch(){
this.$router.push('/search');
}
}此時實現(xiàn)了跳轉(zhuǎn)search的效果。
- 但是新問題:第一個問題:怎么知道點擊的是a標(biāo)簽?因為三級聯(lián)動父div里面有a,h3,dt,dl,是把全部子節(jié)點的事件委派給父親節(jié)點。第二個問題:即使能確定點擊的是a標(biāo)簽,如何區(qū)分點擊的是一級、二級、三級的a標(biāo)簽?
- event是事件對象,可以獲取到當(dāng)前觸發(fā)事件的節(jié)點
解決方法: 把子節(jié)點當(dāng)中a標(biāo)簽,加上自定義屬性data-categoryName,其余的子節(jié)點是沒有的;一級、二級、三級分類的a標(biāo)簽也通過添加自定義屬性來判斷:
<div class="all-sort-list2" @click="goSearch">
<div
class="item"
v-for="(c1, index) in categoryList"
:key="c1.categoryId"
@mouseenter="changeIndex(index)"
:class="{ cur: currentIndex === index }"
>
<h3>
<!-- 給a標(biāo)簽添加自定義屬性 -->
<a
:data-categoryName="c1.categoryName"
:data-category1Id="c1.categoryId"
>{{ c1.categoryName }}</a>
</h3>
<!-- 二三級分類 -->
<div
class="item-list clearfix"
:style="{
display: currentIndex === index ? 'block' : 'none',
}"
>
<div
class="subitem"
v-for="c2 in c1.categoryChild"
:key="c2.categoryId"
>
<dl class="fore">
<dt>
<a
:data-categoryName="c2.categoryName"
:data-category2Id="c2.categoryId"
>{{ c2.categoryName }}</a
>
</dt>
<dd>
<em v-for="c3 in c2.categoryChild" :key="c3.categoryId">
<a
:data-categoryName="c3.categoryName"
:data-category3Id="c3.categoryId"
>{{ c3.categoryName }}</a
>
</em>
</dd>
</dl>
</div>
</div>
</div>
</div>goSearch(event) {
//event.target:獲取到的是觸發(fā)事件的元素(div、h3、a、em、dt、dl)
let node = event.target;
//給a標(biāo)簽添加自定義屬性data-categoryName,全部的字標(biāo)簽當(dāng)中只有a標(biāo)簽帶有自定義屬性,別的標(biāo)簽名字----dataset純屬扯淡
let { categoryname, category1id, category2id, category3id } =
node.dataset;
//第二個問題解決了:點擊的到底是不是a標(biāo)簽(只要這個標(biāo)簽身上帶有categoryname)一定是a標(biāo)簽
//當(dāng)前這個if語句:一定是a標(biāo)簽才會進(jìn)入
if (categoryname) {
//準(zhǔn)備路由跳轉(zhuǎn)的參數(shù)對象
let loction = { name: "search" }; // 固定參數(shù)
let query = { categoryName: categoryname };
//一定是a標(biāo)簽:一級目錄
if (category1id) {
query.category1Id = category1id;
//一定是a標(biāo)簽:二級目錄
} else if (category2id) {
query.category2Id = category2id;
//一定是a標(biāo)簽:三級目錄
} else {
query.category3Id = category3id;
}
//判斷:如果路由跳轉(zhuǎn)的時候,帶有params參數(shù),捎帶腳傳遞過去
if (this.$route.params) {
// 添加動態(tài)參數(shù)
loction.params = this.$route.params;
//動態(tài)給location配置對象添加query屬性
loction.query = query;
//路由跳轉(zhuǎn)
this.$router.push(loction);
}
}
},到此這篇關(guān)于Vue項目-三級聯(lián)動的路由跳轉(zhuǎn)與傳參的文章就介紹到這了,更多相關(guān)Vue路由跳轉(zhuǎn)與傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue監(jiān)聽sessionStorage中值的變化方式
這篇文章主要介紹了vue監(jiān)聽sessionStorage中值的變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
使用vue-print-nb打印el-table問題總結(jié)
這篇文章主要介紹了使用vue-print-nb打印el-table問題總結(jié),通過實例代碼介紹了vue-print-nb 打印功能,本文結(jié)合實例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01
Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析
這篇文章主要介紹了Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析,在文章開頭部分先給大家介紹了vue中的數(shù)據(jù)監(jiān)聽事件$watch,具體代碼講解,大家可以參考下本文2017-07-07
vue3+ts+vite+pinia+element?plus項目使用語言國際化詳解
文章介紹了如何在Vue?3?+?TypeScript?+?Vite?+?Pinia?+?Element?Plus項目中實現(xiàn)語言國際化,主要步驟包括安裝vue-i18n、創(chuàng)建語言文件、創(chuàng)建i18n實例、全局引入、類型聲明(可選)、創(chuàng)建語言切換組件、動態(tài)加載語言文件以及在組件和PiniaStore中使用國際化2025-11-11
el-tree的實現(xiàn)葉子節(jié)點單選的示例代碼
本文主要介紹了el-tree的實現(xiàn)葉子節(jié)點單選的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08

