2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

? ? ????相信左側(cè)導(dǎo)航欄大家都不陌生，幾乎每個(gè)項(xiàng)目都會(huì)存在。以前用jquery做的時(shí)候，某些本不是什么問(wèn)題的地方就突然變成阻礙了。下面就給大家介紹一下在導(dǎo)航中遇到的一些問(wèn)題和解決方法。

????????

<div class="sidebar"><ul class="nav nav-sidebar b-nav"><li :class="{ 'active': isActive[0] }"><a href="javascript:;" class="b-nav-icon b-img2" @click="toggleList(0)">對(duì)接管理</a><ul class="b-nav-inside" :class="{ 'active': isActive[0] }"> <li v-for="item in links[0]"><a @click="tiaozhuan(item.path)" v-link="{ path: item.path, activeClass: 'active' }">{{item.name}}</a></li> </ul></li><li :class="{ 'active': isActive[1] }"><a href="javascript:;" class="b-nav-icon b-img6" @click="toggleList(1)">數(shù)據(jù)中心</a><ul class="b-nav-inside" :class="{ 'active': isActive[1] }"> <li v-for="item in links[1]"><a @click="tiaozhuan(item.path)" v-link="{ path: item.path, activeClass: 'active' }">{{item.name}}</a></li> </ul></li></ul></div> <script>export default {data: function() {return {links: [[{ path: '/dock/adv', name: '廣告主' },{ path: '/dock/media', name: '媒體' }],[{ path: '/data/report', name: '廣告報(bào)表' },{ path: '/data/record', name: '錄數(shù)據(jù)' },{ path: '/data/detail', name: '明細(xì)報(bào)表' }]],isActive: [false, false, false, false, false]}},methods: {tiaozhuan: function(item) {if(this.$route.path == item) {location.href = location.href}},toggleList: function(index) {this.isActive.$set(index, !this.isActive[index])}},route: {data: function(transition) {var path = transition.to.pathfor(var i=0;i<this.links.length;i++) {for (var j=0;j<this.links[i].length;j++) {if(this.links[i][j].path == path) {this.isActive.$set(i, true)break}}}transition.next()}}}</script>

首先是菜單的展開(kāi)與收起，在這里我就用了一個(gè)數(shù)據(jù)去保存每個(gè)菜單的打開(kāi)狀態(tài)，通過(guò)綁定一個(gè)點(diǎn)擊事件，去改變對(duì)應(yīng)的狀態(tài)，從而實(shí)現(xiàn)菜單展開(kāi)收起功能；另外，把導(dǎo)航內(nèi)的信息放到一個(gè)數(shù)組是為了解決在某個(gè)頁(yè)面點(diǎn)擊其對(duì)應(yīng)導(dǎo)航不能刷新頁(yè)面的問(wèn)題，這里我是綁定了一個(gè)點(diǎn)擊事件，在點(diǎn)擊時(shí)判斷此路由是否與當(dāng)前路由相同，如果是就利用location.href=location.href刷新一次；最后在監(jiān)聽(tīng)路由的變化，確保路由變化時(shí)導(dǎo)航欄對(duì)應(yīng)的菜單在打開(kāi)狀態(tài)。以上就是我這次分享的小技巧。

轉(zhuǎn)載于:https://my.oschina.net/u/3171278/blog/818069

總結(jié)

以上是生活随笔為你收集整理的vue项目中处理左侧导航栏问题的分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。