Vue項(xiàng)目三級(jí)聯(lián)動(dòng)路由跳轉(zhuǎn)與傳參的思路詳解
三級(jí)聯(lián)動(dòng)組件的路由的跳轉(zhuǎn)與傳參
三級(jí)聯(lián)動(dòng),用戶可以點(diǎn)擊的:一級(jí)分類、二級(jí)分類和三級(jí)分類
以商城項(xiàng)目為例,Home模塊跳轉(zhuǎn)到Search模塊,以及會(huì)把用戶選中的產(chǎn)品(產(chǎn)品名字、產(chǎn)品ID)在路由跳轉(zhuǎn)的時(shí)候,進(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)入三級(jí)聯(lián)動(dòng),上下滑動(dòng)的時(shí)候,會(huì)出現(xiàn)卡頓現(xiàn)象。
原因:router-link是一個(gè)組件,當(dāng)服務(wù)器的數(shù)據(jù)返回后,循環(huán)出很多router-link組件創(chuàng)建實(shí)例1000+,創(chuàng)建組件實(shí)例的時(shí)候,一瞬間創(chuàng)建很多組件很耗內(nèi)存,因此出現(xiàn)卡頓現(xiàn)象。
編程時(shí)導(dǎo)航(常使用)
綁定點(diǎn)擊事件
點(diǎn)擊事件一個(gè)方法
- 點(diǎn)擊確實(shí)能夠?qū)崿F(xiàn)跳轉(zhuǎn),而且沒有卡頓的現(xiàn)象。
- 但是這種方法也不是最好的
- 原因是:因?yàn)槊恳粋€(gè)a標(biāo)簽都綁定了一個(gè)@click函數(shù),因?yàn)檫@個(gè)三級(jí)聯(lián)動(dòng),要循環(huán),可能會(huì)有1000+次,所以相當(dāng)于綁定1000+@click回調(diào)函數(shù),那么1000個(gè)回調(diào)函數(shù)。
事件委派+編程式導(dǎo)航(最佳方法)
事件委派:把原來加給子元素身上的事件綁定在父元素身上,就是把時(shí)間委派給父元素。比如說,鼠標(biāo)點(diǎn)擊事件,本來頁(yè)面上有很多的鼠標(biāo)點(diǎn)擊事件,需要一個(gè)個(gè)的去寫實(shí)現(xiàn)函數(shù),但是如果你把鼠標(biāo)點(diǎn)擊事件交給上司來完成,那么就是鼠標(biāo)點(diǎn)擊那里的時(shí)候,就相當(dāng)于上司找對(duì)應(yīng)的下屬來完成此事件,而不像前面一個(gè)個(gè)的去找實(shí)現(xiàn)函數(shù)。
<ul id="ul1" > <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> 如果給每個(gè)li添加點(diǎn)擊事件: var li=document.getElementsByTagName('li'); function A(){ alert(li.innerHTML); }; li.click=A;
但是事件委派有兩個(gè)弊端:很耗費(fèi)資源;如果后期動(dòng)態(tài)添加li,不會(huì)擁有這個(gè)彈出事件。
事件委派+編程式導(dǎo)航 實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)
利用事件的委派
- 在三級(jí)聯(lián)動(dòng)的父元素的div綁定一個(gè)@click=“goSearch”
<!-- 利用事件委派和編程式導(dǎo)航實(shí)現(xiàn)路由跳轉(zhuǎn)和傳參--> <div class="all-sort-list2" @click="goSearch">
methods這樣寫:
methods:{ goSearch(){ this.$router.push('/search'); } }
此時(shí)實(shí)現(xiàn)了跳轉(zhuǎn)search的效果。
- 但是新問題:第一個(gè)問題:怎么知道點(diǎn)擊的是a標(biāo)簽?因?yàn)槿?jí)聯(lián)動(dòng)父div里面有a,h3,dt,dl,是把全部子節(jié)點(diǎn)的事件委派給父親節(jié)點(diǎn)。第二個(gè)問題:即使能確定點(diǎn)擊的是a標(biāo)簽,如何區(qū)分點(diǎn)擊的是一級(jí)、二級(jí)、三級(jí)的a標(biāo)簽?
- event是事件對(duì)象,可以獲取到當(dāng)前觸發(fā)事件的節(jié)點(diǎn)
解決方法: 把子節(jié)點(diǎn)當(dāng)中a標(biāo)簽,加上自定義屬性data-categoryName,其余的子節(jié)點(diǎn)是沒有的;一級(jí)、二級(jí)、三級(jí)分類的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> <!-- 二三級(jí)分類 --> <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; //第二個(gè)問題解決了:點(diǎn)擊的到底是不是a標(biāo)簽(只要這個(gè)標(biāo)簽身上帶有categoryname)一定是a標(biāo)簽 //當(dāng)前這個(gè)if語(yǔ)句:一定是a標(biāo)簽才會(huì)進(jìn)入 if (categoryname) { //準(zhǔn)備路由跳轉(zhuǎn)的參數(shù)對(duì)象 let loction = { name: "search" }; // 固定參數(shù) let query = { categoryName: categoryname }; //一定是a標(biāo)簽:一級(jí)目錄 if (category1id) { query.category1Id = category1id; //一定是a標(biāo)簽:二級(jí)目錄 } else if (category2id) { query.category2Id = category2id; //一定是a標(biāo)簽:三級(jí)目錄 } else { query.category3Id = category3id; } //判斷:如果路由跳轉(zhuǎn)的時(shí)候,帶有params參數(shù),捎帶腳傳遞過去 if (this.$route.params) { // 添加動(dòng)態(tài)參數(shù) loction.params = this.$route.params; //動(dòng)態(tài)給location配置對(duì)象添加query屬性 loction.query = query; //路由跳轉(zhuǎn) this.$router.push(loction); } } },
到此這篇關(guān)于Vue項(xiàng)目-三級(jí)聯(lián)動(dòng)的路由跳轉(zhuǎn)與傳參的文章就介紹到這了,更多相關(guān)Vue路由跳轉(zhuǎn)與傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解Vue實(shí)現(xiàn)鏈接生成二維碼并支持下載
在現(xiàn)代 Web 應(yīng)用中,快速分享鏈接是一項(xiàng)常見需求,二維碼作為一種簡(jiǎn)潔的分享方式,受到了廣泛歡迎,所以本文將介紹如何使用 Vue 純前端技術(shù)實(shí)現(xiàn)動(dòng)態(tài)生成鏈接二維碼的方法,需要的可以參考下2024-03-03element-ui中select組件綁定值改變,觸發(fā)change事件方法
今天小編就為大家分享一篇element-ui中select組件綁定值改變,觸發(fā)change事件方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08詳解使用vue-router進(jìn)行頁(yè)面切換時(shí)滾動(dòng)條位置與滾動(dòng)監(jiān)聽事件
本篇文章主要介紹了詳解使用vue-router進(jìn)行頁(yè)面切換時(shí)滾動(dòng)條位置與滾動(dòng)監(jiān)聽事件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03Vue引入jquery實(shí)現(xiàn)平滑滾動(dòng)到指定位置
這篇文章主要介紹了Vue引入jquery實(shí)現(xiàn)平滑滾動(dòng)到指定位置的效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-05-05Vuex報(bào)錯(cuò)之[vuex] unknown mutation type: han
這篇文章主要介紹了Vuex報(bào)錯(cuò)之[vuex] unknown mutation type: handlePower問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07解決el-menu標(biāo)題過長(zhǎng)顯示不全問題
本文主要介紹了如何解決el-menu標(biāo)題過長(zhǎng)顯示不全問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,感興趣的朋友們跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12vue實(shí)現(xiàn)長(zhǎng)圖垂直居上 vue實(shí)現(xiàn)短圖垂直居中
這篇文章主要為大家詳細(xì)介紹了vue彈性布局實(shí)現(xiàn)長(zhǎng)圖垂直居上,vue實(shí)現(xiàn)短圖垂直居中,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10