2019獨角獸企業重金招聘Python工程師標準>>>

? ? ????相信左側導航欄大家都不陌生，幾乎每個項目都會存在。以前用jquery做的時候，某些本不是什么問題的地方就突然變成阻礙了。下面就給大家介紹一下在導航中遇到的一些問題和解決方法。

????????

<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)">對接管理</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)">數據中心</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: '廣告報表' },{ path: '/data/record', name: '錄數據' },{ path: '/data/detail', name: '明細報表' }]],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>

首先是菜單的展開與收起，在這里我就用了一個數據去保存每個菜單的打開狀態，通過綁定一個點擊事件，去改變對應的狀態，從而實現菜單展開收起功能；另外，把導航內的信息放到一個數組是為了解決在某個頁面點擊其對應導航不能刷新頁面的問題，這里我是綁定了一個點擊事件，在點擊時判斷此路由是否與當前路由相同，如果是就利用location.href=location.href刷新一次；最后在監聽路由的變化，確保路由變化時導航欄對應的菜單在打開狀態。以上就是我這次分享的小技巧。

轉載于:https://my.oschina.net/u/3171278/blog/818069

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。