Vue的导航栏通过v-for进行遍历实现，封装菜单的请求工具类

Posted 2021-12-29 houzhicongone

文章目录

• 导航栏通过v-for进行遍历实现
• • 1.在router里面的index.js里面定义了相关的路由，可以算出是嵌套的路由,用children数组进行定义
  • 2. 进行遍历其中的routes数组，和children数组进行取出相关的值Home.vue文件中
• 封装菜单的请求工具类
• • 为什么？
  • 把菜单数据存放到Vuex中，记录它的状态

导航栏通过v-for进行遍历实现

1.在router里面的index.js里面定义了相关的路由，可以算出是嵌套的路由,用children数组进行定义

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login'
import Home from '../views/Home'
import Test1 from '../views/Test1'
import Test2 from '../views/Test2'

Vue.use(VueRouter)

const routes = [
  
    path: '/',
    name: 'LoginAdmin',
    component: Login,
    hidden:true
  ,
  
  
  
    path: '/Home',
    name: '导航一',
    component: Home,
    children:[
      
        path: '/TestMain1',
        name: '选项一',
        component: Test1
      ,
      
        path: '/TestMain2',
        name: '选项二',
        component: Test2
      ,
    ]
  ,
]

const router = new VueRouter(
  routes
)

export default router

2. 进行遍历其中的routes数组，和children数组进行取出相关的值Home.vue文件中

<template>
<section>
  <el-container>
  <el-header>Header</el-header>
  
  <el-container>
    <el-aside width="200px">
        <!-- 注意这个@select的位置是在el-menu里面的 -->
         <!-- 方法一 <el-menu  @select="subMenu"> -->
            <el-menu router>
                <!-- 可以用v-show来控制login组件是否进行显示 -->
      <el-submenu index="1" v-for="(item,index) in this.$router.options.routes" :key="index" v-show="!item.hidden">
        <template slot="title"><i class="el-icon-location"></i>
        <span>item.name</span>
        </template>
       
 
          <el-menu-item  :index="children.path" v-for="(children,indexj) in item.children" :key="indexj">
              children.name
              </el-menu-item>
       
       
      </el-submenu>
         </el-menu>
    </el-aside>
    <el-main>
        <router-view/>
    </el-main>
  </el-container>
</el-container>  
</section>

</template>


<script>
// 因为在main.js里面已经定义好了，可以在这里直接使用
// import  postRequest  from '../utils/api'
export default 
    name:'homeIndex',
   
   data()
    return
    
  
  ,
  methods:
    
  ,



</script>

<style scoped>

</style>

封装菜单的请求工具类

为什么？

因为后端的菜单存放的是一个字符串的形式的一个数据库的字段需要把它 转换为一个Json格式。

把菜单数据存放到Vuex中，记录它的状态

// 因为后端的数据库的字段是component而且是字符串的类型，所以需要把它转换为对象（通过menu.js这个类进行相应的转换）

import  getRequest  from "./api";

export const initMenu = (router,store) =>
//  里面的routes不为空需要初始化
    if(store.state.routes.length>0)
     return;
 
getRequest('/system/config/menu').then(data=>
     if(data)
        //  格式化router
         let fmtRoutes =formateRoutes(data);
        //  添加到router
         router.addRoutes(fmtRoutes);

        //  将数据存入vuex
        this.$store.commit('initRoutes', fmtRoutes );
     
 )





export const formateRoutes=(routes)=>
    let fmtRoutes=[];
    routes.forEach(router=>
        // 里面的path,component,name,iconCls,children这些为数据库的字段的名字
        let
            path,
            component,
            name,
            iconCls,
            children,
        =router;
        if(children && children instanceof Array)
            // 递归
            children = formateRoutes(children);
        
        let fmRouter = 
            path:path,
            name:name,
            iconCls:iconCls,
            children:children,
            component(resolve)
                if(component.startsWith('Emp'))

                    require(['../views/emp'+component+'.vue'],resolve);
                else if(component.startsWith('Per'))
                    require(['../views/per'+component+'.vue'],resolve);
                else if(component.startsWith('sta'))
                    require(['../views/sta'+component+'.vue'],resolve);
                else if(component.startsWith('sal'))
                    require(['../view/sal'+component+'.vue'],resolve);
                
                else if(component.startsWith('sys'))
                    require(['../view/sys'+component+'.vue'],resolve);
                
            
        
        fmtRoutes.push(fmRouter)

    );
    return fmtRoutes;