利用Vue.js,Vuex,Vue-router开发响应式导航菜单


20170216094920_31357.jpg

利用vue.js和vue-router开发单网页应用前面已经有所介绍了,不过今天想在单网页的基础上开发一个响应式的导航,首先需求是导航可根据当前路由自动置于active状态,而且还可以集中配置,由后端语言生成导航的配置文件。

由于涉及到子组件与父组件之间的通信,所以我用到了vuex。

  • 新建menu.js配置文件

在根目录新建menu.js文件,定义一个包含对象的数组,每一个对象表示一个导航,文件如下

var menu =  [
    {
        name: '首页',
        path: '/',
        icon: 'fa fa-link',
        active: false
    },
    {
        name: '用户权限',
        path: '',
        icon: 'fa fa-link',
        active: false,
        children: [
            {
                name: '用户',
                path: '/users',
                icon: 'fa fa-link',
                active: false,
            },
            {
                name: '权限',
                path: '/permissions',
                icon: 'fa fa-link',
                active: false,
            },
            {
                name: '角色',
                path: '/roles',
                icon: 'fa fa-link',
                active: false,
            }
        ]
    }
];
export {menu};

对象中的属性

name:导航名

path:导航的路由

icon:导航样式的小图标

active:是否处于激活状态

children:子导航对象(属性和前面一致)

  • 配置vuex

import {menu} from './menu';
//导入vuex
import Vuex from 'vuex';
Vue.use(Vuex);

//创建store
const store = new Vuex.Store({
    state: {
        menu: menu
    },
    mutations: {
        changeMenu:function (state,payload) {
            var items;
            console.log(payload.path);
            for(var i=0;i<state.menu.length;i++){
                state.menu[i].active =false;
                if(state.menu[i].children!=null){
                    for(var j=0;j<state.menu[i].children.length;j++) {
                        state.menu[i].children[j].active = false;
                    }
                }
            }
            for(var i=0;i<state.menu.length;i++){
                items = state.menu[i];
                console.log(items.path);
                if(items.path==payload.path){
                    state.menu[i].active =true;
                    break;
                }else{
                    if(state.menu[i].children!=null){
                        var child;
                        for(var j=0;j<state.menu[i].children.length;j++){
                            child = state.menu[i].children[j];
                            if(child.path==payload.path){
                                state.menu[i].active =true;
                                state.menu[i].children[j].active =true;
                                break;
                            }
                        }
                    }
                }
            }
        }

    }
});

其中state中的menu即导航。mutations中的changeMenu即改变导航,这里使用了两次循环,首先把导航状态active:true的置为false,然后寻找与当前路由状态一致的导航并把状态置为true。在路由改变的时候我们要改变导航,所以定义一个前置路由钩子

router.beforeEach((to, from, next) => {
    store.commit('changeMenu',{path:to.path});
    next();
});

  • 然后处理导航的html代码

<ul class="sidebar-menu">
    <li class="header">菜单</li>
    <li v-for="item in menu" v-bind:class="{'active':item.active,'treeview':item.children}">
        <router-link :to="item.path" v-if="item.children==null">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
        </router-link>

        <a href="javascript:;" v-if="item.children!=null">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
            <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
            </span>
        </a>
        <ul class="treeview-menu" v-if="item.children!=null">
            <li v-for="child in item.children" v-bind:class="{'active':child.active}">
                <router-link :to="child.path">
                    <i :class="child.icon"></i>{{child.name}}
                </router-link>
            </li>
        </ul>

    </li>
</ul>


完工!完整实例可见我的项目github:https://github.com/xixi2005/XpermissionFront


本文 暂无 评论

Top