相信左侧导航栏大家都不陌生，几乎每个项目都会存在。以前用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刷新一次；最后在监听路由的变化，确保路由变化时导航栏对应的菜单在打开状态。以上就是我这次分享的小技巧。