vue項目中處理左側導航欄問題的分享

        相信左側導航欄你們都不陌生，幾乎每一個項目都會存在。之前用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.path
				for(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刷新一次；最後在監聽路由的變化，確保路由變化時導航欄對應的菜單在打開狀態。以上就是我此次分享的小技巧。