NavMenu和router实现头部菜单功能

使用element-ui中的NavMenu菜单组件和路由router实现菜单切换功能。主要分为四个步骤：

1.路由文件配置。

2.添加测试的页面文件。

3.App.vue文件添加路由出口router-view。

4.添加菜单文件并引入页面。

1.无嵌套菜单实现

非嵌套菜单就是菜单没有内嵌的子菜单，如下所示：

1.1 路由文件

router/index.js

因为需要测试路由跳转功能，所以添加了测试文件DeptInfo.vue和DeptMap.vue。并添加了异常文件，既404页面和无权限页面。这些页面都是自定义。

import Vue from 'vue';
import VueRouter from 'vue-router';

// 路由组件
import Home from '@/views/Home.vue';

Vue.use(VueRouter);

// 创建VueRouter实例
const router = new VueRouter({
    // 路由模式
    mode: 'history',
    // 配置路径和对应的组件
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
            redirect: '/deptInfo',
            children: [
                {
                    path: '/deptInfo',
                    name: 'deptInfo',
                    component: () => import(/* webpackChunkName: "DeptInfo" */ '@/views/DeptInfo.vue'),
                    meta: {
                        menuCode: 1,
                        moduleName: '部门信息'
                    }
                },
                {
                    path: '/deptMap',
                    name: 'deptMap',
                    component: () => import(/* webpackChunkName: "deptMap" */ '@/views/DeptMap.vue'),
                    meta: {
                        menuCode: 2,
                        moduleName: '部门地图'
                    }
                }
            ]
        },

        {
            path: '/404',
            name: 'notFound',
            component: () => import(/* webpackChunkName: "notFound" */ '@/views/exception/notFound.vue')
        },
        {
            path: '/noAuth',
            name: 'noAuth',
            component: () => import(/* webpackChunkName: "noAuth" */ '@/views/exception/noAuth.vue')
        },

        // 需要放在最后
        {
            path: '*',
            redirect: '/404',
            hidden: true
        }
    ]
});

// 可选，全局前置路由守卫，初始化时执行、每次路由切换前执行。
// router.beforeEach((to, from, next) => {
//     // 路由若包含aaa，则可处理。
//     if (to.path.includes('aaa')) {
//         if (to.path.includes('xxx')) {
//            // 处理缓存、权限控制等。
//         } else {
//             // 处理缓存、权限控制等。
//         }
//     } else {
//         // 处理缓存、权限控制等。
//     }

//     next();
// });

export default router;

1.2 项目结构

主要创建了Home文件，管理其他页面文件。Home文件可不创建，使用App.vue也可以。但是在Home中这样可以统一对页面文件处理。

1.3 页面入口文件App.vue

页面入口文件中的router-view路由出口，是对整个页面的显示。

App.vue

<template>
    <div id="app">
        <!-- App.vue是根组件，最开始的页面就显示在这里。 -->
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            message: 'vue2'
        };
    }
};
</script>

1.4 菜单文件

菜单文件是头部样式和操作的文件。可以放在components下面，位置自定义。

HeadNav.vue

<template>
    <el-menu :default-active="$route.path" class="el-menu-demo" router mode="horizontal">
        <el-menu-item index="/deptInfo">部门信息</el-menu-item>
        <el-menu-item index="/deptMap">部门地图</el-menu-item>
    </el-menu>
</template>

<script>
export default {
    data() {
        return {
            activeIndex: 'deptInfo'
        };
    },
    methods: {}
};
</script>

<style lang="less"></style>

1.5 Home文件

因为在路由文件配置路由时，把其他页面文件的路由都放在Home的children里面，既其他页面文件的路由是其子路由。所以，需要在Home文件中添加路由出口router-view。在Home.vue文件中可引入头部菜单文件，将菜单应用于全部页面。在这个文件中，可对全部页面的公共配置进行设置。

Home.vue

<template>
    <div>
        <head-nav></head-nav>
        <!-- 因为在路由里面，其他路由是home的children，所以需要加router-view，显示二级路由。 -->
        <router-view></router-view>
    </div>
</template>

<script>
import HeadNav from '@/components/HeadNav';

export default {
    components: { HeadNav },
    data() {
        return {
            message: '首页'
        };
    }
};
</script>

<style lang="less"></style>

DeptInfo.vue、DeptMap.vue等页面文件内容自定义。

DeptInfo.vue

<template>
    <div class="dept-info-container">
        {{ type }}
    </div>
</template>

<script>
export default {
    name: 'DeptInfo',
    data() {
        return {
            type: '部门信息'
        };
    }
};
</script>

<style lang="less">
.dept-info-container {
    font-size: 100px;
    color: #377ef9;
}
</style>

DeptMap.vue

<template>
    <div class="dept-map-container">
        {{ type }}
    </div>
</template>

<script>
export default {
    name: 'DeptMap',
    data() {
        return {
            type: '部门地图'
        };
    }
};
</script>

<style lang="less">
.dept-map-container {
    font-size: 100px;
    color: #377ef9;
}
</style>

2.嵌套菜单实现

嵌套菜单就是部分菜单含有内嵌的子菜单。主要和非嵌套的菜单由以下不同：

1.路由文件使用children实现内嵌的路由，可不使用children，但是为了可读性，建议使用children实现。

2.为了可读性，项目目录变化。

3.菜单文件增加内嵌菜单配置。

4.在路由文件添加的children的上一级页面添加路由出口router-view。

App.vue和Home.vue文件不变。

1.1 路由文件

在deptInfo的路由下面增加了children。

import Vue from 'vue';
import VueRouter from 'vue-router';

// 路由组件
import Home from '@/views/Home.vue';

Vue.use(VueRouter);

// 创建VueRouter实例
const router = new VueRouter({
    // 路由模式
    mode: 'history',
    // 配置路径和对应的组件
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
            redirect: '/deptInfo',
            children: [
                {
                    path: '/deptInfo',
                    name: 'deptInfo',
                    component: () => import(/* webpackChunkName: "DeptInfo" */ '@/views/DeptInfo'),
                    meta: {
                        menuCode: 1,
                        moduleName: '部门信息'
                    },
                    children: [
                        {
                            path: 'deptInfoOne', // 注意路径不加/
                            name: 'deptInfoOne',
                            component: () => import(/* webpackChunkName: "deptInfoOne" */ '@/views/DeptInfo/components/deptInfoOne.vue'),
                            meta: {
                                menuCode: 3,
                                moduleName: '部门信息子路由1'
                            }
                        },
                        {
                            path: 'deptInfoTwo', // 注意路径不加/
                            name: 'deptInfoTwo',
                            component: () => import(/* webpackChunkName: "deptInfoTwo" */ '@/views/DeptInfo/components/deptInfoTwo.vue'),
                            meta: {
                                menuCode: 4,
                                moduleName: '部门信息子路由2'
                            }
                        }
                    ]
                },
                {
                    path: '/deptMap',
                    name: 'deptMap',
                    component: () => import(/* webpackChunkName: "deptMap" */ '@/views/DeptMap.vue'),
                    meta: {
                        menuCode: 2,
                        moduleName: '部门地图'
                    }
                }
            ]
        },

        {
            path: '/404',
            name: 'notFound',
            component: () => import(/* webpackChunkName: "notFound" */ '@/views/exception/notFound.vue')
        },
        {
            path: '/noAuth',
            name: 'noAuth',
            component: () => import(/* webpackChunkName: "noAuth" */ '@/views/exception/noAuth.vue')
        },

        // 需要放在最后
        {
            path: '*',
            redirect: '/404',
            hidden: true
        }
    ]
});

// 可选，全局前置路由守卫，初始化时执行、每次路由切换前执行。
// router.beforeEach((to, from, next) => {
//     // 路由若包含aaa，则可处理。
//     if (to.path.includes('aaa')) {
//         if (to.path.includes('xxx')) {
//            // 处理缓存、权限控制等。
//         } else {
//             // 处理缓存、权限控制等。
//         }
//     } else {
//         // 处理缓存、权限控制等。
//     }

//     next();
// });

export default router;

1.2 项目结构

1.3 菜单文件

HeadNav.vue

<template>
    <el-menu :default-active="$route.path" class="el-menu-demo" router mode="horizontal">
        <!-- <el-menu-item index="/deptInfo">部门信息</el-menu-item>
        <el-menu-item index="/deptMap">部门地图</el-menu-item> -->
        <template v-for="item in menuList">
            <!-- 有子路由 -->
            <el-submenu :key="item.url" :index="item.url" v-if="item.hasChildren">
                <template slot="title">{{ item.name }}</template>
                <el-menu-item v-for="itemChildren in item.children" :key="itemChildren.url" :index="itemChildren.url">
                    {{ itemChildren.name }}
                </el-menu-item>
            </el-submenu>
            <!-- 没有子路由 -->
            <el-menu-item :key="item.url" :index="item.url" v-else>
                {{ item.name }}
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script>
export default {
    data() {
        return {
            activeIndex: 'deptInfo',
            menuList: [
                {
                    name: '部门信息',
                    url: '/deptInfo',
                    hasChildren: true,
                    children: [
                        {
                            name: '部门信息子路由1',
                            url: '/deptInfo/deptInfoOne'
                        },
                        {
                            name: '部门信息子路由2',
                            url: '/deptInfo/deptInfoTwo'
                        }
                    ]
                },
                {
                    name: '部门地图',
                    url: '/deptMap',
                    hasChildren: false
                }
            ]
        };
    },
    methods: {}
};
</script>

<style lang="less"></style>

1.4 DeptInfo文件

因为是在DeptInfo下面增加的children。所以需要在DeptInfo.vue中，既DeptInfo目录下的index.vue文件增加router-view路由出口。

<template>
    <div class="dept-info-container">
        {{ type }}
        <!-- children路由的路由出口 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'DeptInfo',
    data() {
        return {
            type: '部门信息'
        };
    }
};
</script>

<style lang="less">
.dept-info-container {
    font-size: 100px;
    color: #377ef9;
}
</style>

这篇好文章是转载于：学新通技术网