效果图
记得在 vue 还没出来的时候,那个时候这种现象根本不是个问题.稍微牛逼点的把左侧菜单抽出一个单独的公共文件,在每个需要调用的文件里引入,最差的就是每个页面都写一样的菜单,只是每个页面高亮的样式(.class 名)不一样,以此到达到某个页面后不管你是刷新页面呢?还是怎么得它的高亮都是在的.
而 vue 它是以组件式单页面的形式开发,它就很难想传统的那样很方便的,做到跳转页面后导航菜单某个选项还保持着高亮的效果.大家可以想到的,左侧菜单是一个组件,上边又是个组件,右边内容又是各个不一样的组件,所以要控制怎么多的组件就很难做到,到底那些组件是应该那个选项高亮呢?
这里为大家讲,借助 iView 的 ui 组件来为大家讲解如何简单的在 vue 上实现:
左侧导航菜单
<Menu :theme="theme3" :active-name="activemenu">
<MenuGroup title="内容管理">
<MenuItem name="1">
<Icon type="document-text"></Icon>
文章管理
</MenuItem>
<MenuItem name="2">
<Icon type="chatbubbles"></Icon>
评论管理
</MenuItem>
</MenuGroup>
<MenuGroup title="统计分析">
<MenuItem name="3">
<Icon type="heart"></Icon>
用户留存
</MenuItem>
<MenuItem name="4">
<Icon type="heart-broken"></Icon>
流失用户
</MenuItem>
</MenuGroup>
</Menu>
theme 是 iView 样式模式(light,dark,primary), active-name 是对于选项中的 name,表示高亮那个选项
<script>
export default {
data () {
return {
theme3: 'light',
activemenu:1 // 高亮
}
},
methods:{
menuList(){ // 这个方法里定义好,高亮和路由
let path = this.$route.matched[1].path // 获取到地址拦上#号后面的url地址
if(path.indexOf('事先定义好的理由') != -1){ // 是否包含,-1是包含,0不包含
this.activemenu = 2
}
}
},
mounted(){ // 组件初始化后执行
this.menuList()
}
}
</script>
如果有子页面也是一样,路由包含父页面的路由就可以.比如:父页面的路由是:
'/Thearticle'然后想跳转到修改文章页面,算是子页面了.就可以这样设置:'/Thearticle/Modify',这样在 menuList 方法里设置'/Thearticle'就可以了,不管是挑那个页面都能高亮当前选项.
有喜欢 vue 或前端的同学可以加我(微信:nihaomeili87)我们一起进步
来源: http://www.jianshu.com/p/5f239ce7643b