vue项目，里面有多个角色，要求用共同的 router，header_router headercomponent

1.可以把router 里面的 index.js 封装成公共的 ，把json文件引进来，还有store。

2.下面是判断 用户类型，进哪个json 文件

export function asyncRouterMap () {
  let RouterMap = []
  const asyncRouterMapData = []
  // eslint-disable-next-line eqeqeq
  if (store.getters.userType == '1') {
    RouterMap = adminRouteData.admin.router
  } else if (store.getters.userType === '99') {
    RouterMap = operationRouteData.operation.router
  } else if (store.getters.userType === '2') {
  // eslint-disable-next-line no-const-assign
    RouterMap = chartRouteData.chart.router
  }
  for (let i = 0; i < RouterMap.length; i++) {
    const item = {
      path: RouterMap[i].path,
      redirect: RouterMap[i].redirect,
      name: RouterMap[i].name,
      component: main,
      hidden: RouterMap[i].hidden,
      children: []
    }
    for (let j = 0; j < RouterMap[i].children.length; j++) {
      let itemChild = {
        path: '/' + RouterMap[i].children[j].path,
        name: RouterMap[i].children[j].name,
        icon: RouterMap[i].children[j].icon,
        component: _import(RouterMap[i].children[j].path)
      }
      item.children.push(itemChild)
    }
    asyncRouterMapData.push(item)
  }
  console.log(asyncRouterMapData)

  return asyncRouterMapData
}

3. 在containers => 下的  main.vue

v-show=“!plat”  判断左侧边栏 和底部 是否显示

main.vue  代码如下：

<template>
  <div class="app">
    
      <AppHeader/>
       <div class="app-body">
        <Sidebar  v-show="!plat"/>
        <div class="main" ref="main" :class='[plat ? "platmap": ""]'>
          <breadcrumb  :list="list" v-show="!plat"/>
          <div class="container-fluid" :class='[plat ? "platfluid": ""]'>
            <router-view></router-view>
          </div>
        </div>
        <AppAside/>
       </div>
      <AppFooter v-show="!plat"/>
    
    
  </div>
</template>

<script>
import AppHeader from '../components/Header'
import Sidebar from '../components/Sidebar'
import AppAside from '../components/Aside'
import AppFooter from '../components/Footer'
import Breadcrumb from '../components/Breadcrumb'

export default {
  components: {
    AppHeader,
    Sidebar,
    AppAside,
    AppFooter,
    Breadcrumb
  },
  data(){
    return{
      plat: false
    }
  },
  computed: {
    name () {
      return this.$route.name
    },
    list () {
      return this.$route.matched
    }
  },
  created(){
    if(this.$store.state.user.userType == "2"){
      this.plat = true
    }
  }
}
</script>
<style scoped>
  .platmap{
    margin-left: 0 !important
  }
  .platfluid{
    padding: 0
  }
</style>

4. 在components => header.vue

没修改前的：

可以把这块封装一下，用数组遍历；

5. navheader  判断条件：

6. header.vue 代码：

<template>
  <navbar>
    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">&#9776;</button>
    <a class="navbar-brand">
      <img src="/static/img/MainMenu_logo.png">
      <span class="workName">{{networkName}}</span>
    </a>
    <ul class="nav navbar-nav d-md-down-none">
      <li class="nav-item">
        <a class="nav-link navbar-toggler sidebar-toggler"  @click="sidebarMinimize">&#9776;</a>
      </li>
     
    </ul>

    <ul class="nav navbar-nav d-md-down-none">
      <li v-for="item in navData" class="nav-item header-item" :key="item.index">
        <router-link tag="div" :to='item.path'  style="height:55px;" class="nav-link">
            <span><Icon :type="item.icon" size='30' color="#2d8cf0"></Icon></span>
            <span  style="color:white"> {{item.name}} </span>
        </router-link> 
      </li>
    </ul>

    <ul class="nav navbar-nav ml-auto">

      <Dropdown class="nav-item">
        <a href="javascript:void(0)">
           <span slot="button">
          <img src="/static/img/avatars/6.png"  alt="o" style="width:50px;height:50px;">
          <span class="d-md-down-none">{{this.$store.state.user.name}}</span>
          </span>
        </a>
        <Dropdown-menu slot="list">
            <Dropdown-item > <a href="" @click="Logout"  ><p  class="dropdown-itemp"><Icon type="power"></Icon>登出</p></a></Dropdown-item>
        </Dropdown-menu>
    </Dropdown>

 
      <li class="nav-item d-md-down-none">
        <a class="nav-link navbar-toggler aside-menu-toggler"  @click="asideToggle">&#9776;</a>
      </li>
    </ul>
  </navbar>
</template>
<script>

import navbar from './Navbar'

export default {
  components: {
    navbar, 
  },
  data(){
    return{
     logo: "",
     networkName: '',
     navData: []
    }
  },
  methods: {
    Logout(e){
         e.preventDefault();
         this.$store.dispatch('LogOut').then(() => {
                this.$router.push({ path: '/login' });
                
                console.log(this)
              }).catch(err => {
                this.$message.error(err);
              });
    },
    click () {
      // do nothing
    },
    sidebarToggle (e) {
      e.preventDefault()
      document.body.classList.toggle('sidebar-hidden')
    },
    sidebarMinimize (e) {
      e.preventDefault()

      document.body.classList.toggle('sidebar-minimized')
    },
    mobileSidebarToggle (e) {
      e.preventDefault()

      document.body.classList.toggle('sidebar-mobile-show') 
    },
    asideToggle (e) {
      e.preventDefault()
      document.body.classList.toggle('aside-menu-hidden')
    },
    URL_LOGO(){ 
      this.networkName = this.$store.getters.serverNodeName
      let manage = this.$store.state.parameter.deserve.M406
      // for(let i=0; i<manage.length; i++){
      //   if(manage[i].itemValue == this.$store.getters.manageType){
      //     this.logo = "/static/img/"+ manage[i].itemName +"-logo.png"
      //   }
      // }
    },
    navHeader(){
      
      if(this.$store.state.user.userType == "1"){
        this.$axios({ 
            method: 'GET',
            url: '/static/json/admin.json',
        }).then((res)=> {
            this.navData = res.data.admin.header
        }).catch((error) =>{})
      }else if(this.$store.state.user.userType == "99"){
        this.$axios({ 
            method: 'GET',
            url: '/static/json/operation.json',
        }).then((res)=> {
            this.navData = res.data.operation.header
        }).catch((error) =>{})
      }else if(this.$store.state.user.userType == "2"){
        this.$axios({ 
            method: 'GET',
            url: '/static/json/chart.json',
        }).then((res)=> {
            this.navData = res.data.chart.header
        }).catch((error) =>{})
      }
    }
  },
  created(){
    this.URL_LOGO()
    this.navHeader()
  }
}
</script>

<style type="text/css" scoped>
  .dropdown-itemp{
    text-align: left;
    font-size: 15px;
    padding: 10px;
  }
 .header-item .ivu-dropdown-item{
  padding: 15px;
}
  .header-item{
    width: 120px;
    height: 55px;
    line-height: 55px;
  }
  .header-item span:first-child{height:55px;width:30px;float:left;margin-left:12px;}
  .header-item span:last-child{height:55px;width:70px;float:left;}
  .header-item:hover{
    background-color:#20a8d8
  }
  .header-item a{
        color:white !important;
  }
.navbar-brand img{width:40px;height:40px;display: inline-block;margin:3px;}
.workName{color: #ffffff}
</style>

7.然后在本地文件static 里面建一个json 文件， 每个对应的角色，建立一个json文件。用时调用就可以。

admin.json 代码如下：

{
    "admin": {
        "header": [
            {
                "path": "/liveEdit",
                "name": "广播直播",
                "icon": "logo-vimeo"
            },
            {
                "path": "/addTemplet",
                "name": "广播编播",
                "icon": "logo-youtube"
            },
            {
                "path": "/train",
                "name": "列车广播",
                "icon": "md-videocam"
            },
            {
                "path": "/",
                "name": "广播素材",
                "icon": "md-trophy"
            },
            {
                "path": "/broadcastConfigure",
                "name": "广播分区",
                "icon": "md-git-network"
            },
            {
                "path": "/facility",
                "name": "广播监听",
                "icon": "md-headset"
            },
            {
                "path": "/facility",
                "name": "广播监控",
                "icon": "md-eye"
            },
            {
                "path": "/statistical",
                "name": "统计查询",
                "icon": "ios-search"
            }
        ],
        "router": [
            {
              "path": "/",
              "redirect": "/views/material/editMaterial",
              "name": "素材",
              "hidden": false,
              "children": [
                {"path": "views/material/editMaterial", "name": "素材编制", "icon": "ios-book"},
                {"path": "views/material/auditMaterial", "name": "素材审核", "icon": "md-cube"},
                {"path": "views/material/recordMaterial", "name": "素材档案", "icon": "ios-paper"},
                {"path": "views/material/issueMaterial", "name": "素材发布", "icon": "logo-codepen"}
          
              ] 
            },
            {
                "path": "/liveEdit",
                "redirect": "/views/live/liveEdit",
                "name": "直播",
                "hidden": false,
                "children": [
                  {"path": "views/live/liveEdit", "name": "直播编辑", "icon": "md-film"},
                  {"path": "views/live/test", "name": "监听", "icon": "md-film"}
                ] 
            },
            {
                "path": "/addTemplet",
                "redirect": "/views/broadcast/addTemplet/index",
                "name": "播表",
                "hidden": false,
                "children": [
                  {"path": "views/broadcast/addTemplet/index", "name": "模板编辑", "icon": "md-map"},
                  {"path": "views/broadcast/reviewTemplate/index", "name": "模板审核", "icon": "md-map"},
                  {"path": "views/broadcast/addRec/index", "name": "播表编辑", "icon": "md-map"},
                  {"path": "views/broadcast/reviewRec/index", "name": "播表审核", "icon": "md-map"},
                  {"path": "views/broadcast/inquire", "name": "播表档案", "icon": "md-map"},
                  {"path": "views/broadcast/resIssue", "name": "播表发布", "icon": "md-map"},
                  {"path": "views/broadcast/resState", "name": "播表状态", "icon": "md-map"}
                ] 
            },
            {
                "path": "/train",
                "redirect": "/views/train",
                "name": "广播",
                "hidden": false,
                "children": [
                  {"path": "views/train", "name": "列车广播", "icon": "logo-vimeo"}
                ] 
            },
            {
                "path": "/circuit",
                "redirect": "/views/database/circuit",
                "name": "线路",
                "hidden": false,
                "children": [
                    {"path": "views/database/circuit", "name": "线路数据", "icon": "md-briefcase"},
                    {"path": "views/database/station", "name": "车站数据", "icon": "md-briefcase"},
                    {"path": "views/database/zoning", "name": "分区数据", "icon": "md-briefcase"}
                  
                ] 
            },


### 最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**

![](https://img-blog.csdnimg.cn/img_convert/b3d531cadbdcc0692d91d7640146a51b.webp?x-oss-process=image/format,png)



![前端面试题宝典](https://img-blog.csdnimg.cn/img_convert/99bccd7a4c2ca6fbef394e7008dd7302.webp?x-oss-process=image/format,png)

![前端校招面试题详解](https://img-blog.csdnimg.cn/img_convert/4ca673502ac7d43cbd4ce7a34433ec0e.webp?x-oss-process=image/format,png)

ning", "name": "分区数据", "icon": "md-briefcase"}
                  
                ] 
            },


### 最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**

[外链图片转存中...(img-zYZYkHOX-1714164802371)]



[外链图片转存中...(img-xy0W3FoU-1714164802372)]

[外链图片转存中...(img-HFKSacf6-1714164802372)]