小編給大家分享一下如何解決vue-cli 默認(rèn)路由再子路由選中下的選中狀態(tài)問(wèn)題,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
公司主營(yíng)業(yè)務(wù):網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對(duì)我們的高要求,感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出黃平免費(fèi)做網(wǎng)站回饋大家。vue-cli是Vue.js官方腳手架命令行工具,我們可以用它快速搭建Vue.js項(xiàng)目,vue-cli最主要的功能就是初始化項(xiàng)目,既可以使用官方模板,也可以使用自定義模板生成項(xiàng)目,而且從2.8.0版本開(kāi)始,vue-cli新增了build命令,能讓你零配置啟動(dòng)一個(gè)Vue.js應(yīng)用。
因項(xiàng)目需求,需要在默認(rèn)路由下面的兩個(gè)子路由進(jìn)行切換,當(dāng)開(kāi)始以為不就是路由切換?so easy!就看一下遇到的問(wèn)題吧!
{path: '/',component: resolve => require(['@/components/LiveList'],resolve), children:[ { path:'', name:'livelist', meta:{title:'',index:0}, component: resolve => require(['@/components/compts/livelistcom'],resolve) },{ path:'livenew', name:'livenew', meta:{title:'',index:1}, component: resolve => require(['@/components/compts/livelistnew'],resolve) }] }, { path:'/user', name:'user', meta:{title:'用戶',index:4}, component: resolve => require(['@/components/user'],resolve) },
這路由一看沒(méi)問(wèn)題吧!
<router-link to="/"><p>首頁(yè)</p></router-link>//這是底部的切換路由 //下面兩個(gè)便是首頁(yè)下面的兩個(gè)子路由的跳轉(zhuǎn)了 <li><router-link to="/">熱門</router-link></li> <li><router-link to="/livenew">最新</router-link></li>
看到上面的代碼是不是沒(méi)有發(fā)現(xiàn)錯(cuò)誤?其實(shí)也的確可以運(yùn)行!而且兩個(gè)子路由切換關(guān)于首頁(yè)的狀態(tài)也是沒(méi)有問(wèn)題的!
但是當(dāng)我切換user路由的時(shí)候發(fā)現(xiàn),首頁(yè)路由的狀態(tài)依舊是選中狀態(tài) ,這個(gè)讓我很納悶,按理說(shuō)user路由跟首頁(yè)的路由是同級(jí),不出出現(xiàn)這樣的問(wèn)題。既然出現(xiàn)了,為了工作,只能迎難而上,去解決這個(gè)問(wèn)題。
在經(jīng)過(guò)我仔細(xì)的查找文檔,終于想到了一種解決方案:在官方文檔里面有一個(gè) redirect (重定向) router.vuejs.org/zh/guide/es… 點(diǎn)擊鏈接可以查看官方文檔
既然可以重定向那我就試一下這種來(lái)解決(畢竟上面的代碼和邏輯事再想不出是什么地方出的錯(cuò)誤,還望大神指點(diǎn)一二?。?!)
廢話不多說(shuō),直接先解決后的代碼:
{path:'',redirect: '/index'}, {path: '/index',component: resolve => require(['@/components/LiveList'],resolve), children:[ {path:'',redirect:'livelist'}, { path:'livelist', name:'livelist', meta:{title:'',index:0}, component: resolve => require(['@/components/compts/livelistcom'],resolve) },{ path:'livenew', name:'livenew', meta:{title:'',index:1}, component: resolve => require(['@/components/compts/livelistnew'],resolve) }] }, { path:'/user', name:'user', meta:{title:'用戶',index:4}, component: resolve => require(['@/components/user'],resolve) }
而關(guān)于路由的跳轉(zhuǎn)也有一些小變化:
<router-link to="/index"><p>首頁(yè)</p></router-link>//這里依舊是底部導(dǎo)航 //這里便是首頁(yè)的兩個(gè)子路由的跳轉(zhuǎn)按鈕了 <li><router-link to="/index/livelist">熱門</router-link></li> <li><router-link to="/index/livenew">最新</router-link></li>
構(gòu)思 :用重定向,規(guī)定默認(rèn)路由跳轉(zhuǎn)到上面 /index 下面默認(rèn)的子路由,再由默認(rèn)的子路由去定向到子路由的 livelist 。(這是在解決問(wèn)題的時(shí)候發(fā)現(xiàn),非默認(rèn)路由下,子路由切換不會(huì)造成默認(rèn)路由選中不取消的問(wèn)題,而默認(rèn)路由一直會(huì)存在一個(gè) router-link-active
的類名,我的選中樣式也是基于它的 )
關(guān)于選中時(shí)自定義自己的樣式可以操作.router-link-active
這個(gè)類,而默認(rèn)路由一直存在這個(gè)類,如果沒(méi)有子路由,或者子路由選中不需要顯示父路由也為選中狀態(tài)的情況下,你可以操作.router-link-exact-active
這個(gè)類來(lái)寫(xiě)自己的選中樣式。
看完了這篇文章,相信你對(duì)“如何解決vue-cli 默認(rèn)路由再子路由選中下的選中狀態(tài)問(wèn)題”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
當(dāng)前標(biāo)題:如何解決vue-cli默認(rèn)路由再子路由選中下的選中狀態(tài)問(wèn)題-創(chuàng)新互聯(lián)
分享路徑:http://www.muchs.cn/article40/diepeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、建站公司、微信公眾號(hào)、微信小程序、搜索引擎優(yōu)化、企業(yè)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容