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刷新一次；最后在监听路由的变化，确保路由变化时导航栏对应的菜单在打开状态。以上就是我此次分享的小技巧。