面包屑 占位路由配置，

liuyg

2021-04-15 cea1375a7672df540be24779989561dbba831a78

面包屑   占位路由配置，

 src/page/crumbsL/crumbsL.vue

@@ -1,12 +1,16 @@
<template>
    <div class="breadEval">
  <div class="breadEval">
    <div class="breadTitle">
      <div class="titles">您的位置：</div>
        <!-- <el-breadcrumb-item style="position: relative;top: -3px;left: 5px">您的位置：</el-breadcrumb-item> -->
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/wel/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="item.path" v-for="item of breadListLast" :key="item.path">
          {{item.name}}
      <!-- <el-breadcrumb-item style="position: relative;top: -3px;left: 5px">您的位置：</el-breadcrumb-item> -->
      <el-breadcrumb separator="/">
        <!-- <el-breadcrumb-item v-show="!onceRouter" :to="{ path: '/wel/index' }">首页</el-breadcrumb-item> -->
        <el-breadcrumb-item
          :to="item.path"
          v-for="item of breadListLast"
          :key="item.path"
        >
          {{ item.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
@@ -14,144 +18,232 @@
  </div>
</template>
<script>
  export default {
    //面包屑解决方案，此方法只适用于面包屑与路由显示顺序一致，例如path：01/02/03 面包屑也是01/02/03
    data() {
      return {
        //手动配置项：breadListIm为路由与面包屑名称对应关系,breadLoadName为面包屑组件路由
        upName: {
            '监控台': 'welcomeData',
            '预警管理': 'alarmManagement',
            "预警管理": "realTimePolice",
            "客户管理": 'suser',
            "设备管理": 'clientManagement',
            "研判洞察": 'home',
            "报表管理": 'report',
            "报表管理": 'myiframe',
            "报表配置": 'urlPath',
            "警情调度": 'policeInformationDistribution',
            "系统监控": 'monitor',
            "日志管理": "log",
            "资源管理": 'resource',
            "权限管理": 'authority',
            "系统管理": 'system',
export default {
  //面包屑解决方案，此方法只适用于面包屑与路由显示顺序一致，例如path：01/02/03 面包屑也是01/02/03
  data() {
    return {
      //手动配置项：breadListIm为路由与面包屑名称对应关系,breadLoadName为面包屑组件路由
      upName: {
        监控台: "welcomeData",
        预警管理: "alarmManagement",
        预警管理: "realTimePolice",
        客户管理: "suser",
        设备管理: "clientManagement",
        研判洞察: "home",
        报表管理: "report",
        报表管理: "myiframe",
        报表配置: "urlPath",
        警情调度: "policeInformationDistribution",
        系统监控: "monitor",
        日志管理: "log",
        资源管理: "resource",
        权限管理: "authority",
        系统管理: "system",
      },
      onceRouter: false,
      breadListIm: [
        {
          path: "01",
          name: "一级",
        },
        breadListIm: [
          {
            path: '01',
            name: '一级'
          },
          {
            path: '02',
            name: '二级'
          },
          {
            path: '03',
            name: '三级'
          },
        ],
        breadListLast: []
      };
    },
    methods: {
      loadChange() {
        this.breadListLast = [
            // {
            //     name: '首页',
            //     path: '/wel/index'
            // },
            // {
            //     name: this.$route.name,
            //     path: this.$route.path
            // },
                            // {// 主要数据
                            //     name: this.$route.name,
                            //     path: this.$route.path
                            // }
        ]
        if(this.$route.path){
            var uN = this.upName;
            var pa = this.$route.path,
                na = this.$route.name;
            var uspa = pa.split('/');
            uspa.shift();
            console.log(uspa, pa);
            for(var upk in uspa){
                if(uspa[upk] =='index' || uspa[upk] =='wel' ){continue};
                var nameD;
                for(var key in uN){
                    if(uN[key] == uspa[upk]){
                        nameD = key;
                        break;
                    }else{
                        nameD = na;
                    }
                }
                this.breadListLast.push(
                    {
                        name: nameD,
                        path: pa,
                    }
                )
                if(uspa[upk] =='dataL'){
                    this.breadListLast = [
                        {
                            name: '卡片模式',
                            path: '/welcomeData/card',
                        },
                        {
                            name: nameD,
                            path: pa,
                        }
                    ]
                }
                if(uspa[upk] =='track'){
                    this.breadListLast = [
                        {
                            name: '警情纪录',
                            path: '/realTimePolice/real',
                        },
                        {
                            name: nameD,
                            path: pa,
                        }
                    ]
                }
            }
            console.log(this.breadListLast);
        }else{
            console.log('未识别到路由')
        {
          path: "02",
          name: "二级",
        },
        {
          path: "03",
          name: "三级",
        },
      ],
      breadListLast: [],
    };
  },
  methods: {
    loadChange(states) {
      var path = this.$route.path.split("/"),
        up = {};
      path.shift();
      for (var key in path) {
        //处理基础数据
        if (path[key] == "index") {
          path.splice(key, 1);
        }
      }
      if (states == "moun") {
        //第一次进入页面
        // for (var uk in path) {
          // if (uk < path.length - 1) {
            // continue;
          // }
          if (this.$route.name != "首页") {
            up = {
              // name: path[uk] + (+uk + 1),
              // name: path[uk],
              name: "首页",
              path: "/wel",
            };
          }
          //首页：

          this.breadListLast.push(up);
          up = {
            // name: path[uk] + (+uk + 1),
            // name: path[uk],
            name: this.$route.name,
            path: this.$route.path,
          };
          this.breadListLast.push(up);
        // }
      } else if (states == "rout") {
        //向后添加面包屑

        var nowPath;
        up = {
          // name: path[path.length - 1] + path.length,
          // name: path[path.length - 1],
          name: this.$route.name,
          path: this.$route.path,
        };
        this.breadListLast.push(up);
        //判断是否有重复项，有则删除其后路由↓

        var ourP = this.breadListLast;
        // var newP = path.pop();
        var newP = this.$route.name;
        for (var os in ourP) {
          var inos = ourP[os];
          if (inos.name == newP && os != ourP.length - 1) {
            // console.log(ourP[os],'+++++++++',os);
            this.breadListLast.splice(
              +os + 1,
              this.breadListLast.length - os - 1
            );
          }
          // console.log(inos.name,'--',newP)
        }
        // console.log(ourP, 1111111111111111111);
        // console.log(newP, 2222222222222222222);
        //↑
      }
      //汉化↓
      // var da = this.breadListLast,
      //     na = this.upName;
      // for(var h in da){
      //   for(var n in na){
      //     if(da[h].name == na[n]){
      //       da[h].name = n;
      //     }
      //   }
      // }
      // console.log("path::", path);
      // console.log("data::", this.breadListLast);
    },
    watch: {
      $route(to, from) {
        this.loadChange()
        // console.log(to.path);
    loadChanges() {
      this.breadListLast = [
        // {
        //     name: '首页',
        //     path: '/wel/index'
        // },
        // {
        //     name: this.$route.name,
        //     path: this.$route.path
        // },
        // {// 主要数据
        //     name: this.$route.name,
        //     path: this.$route.path
        // }
      ];
      if (this.$route.path) {
        var uN = this.upName;
        var pa = this.$route.path,
          na = this.$route.name;
        var uspa = pa.split("/");
        uspa.shift();
        console.log(uspa, pa);
        for (var upk in uspa) {
          if (uspa[upk] == "wel") {
            continue;
          }

          var nameD;

          for (var key in uN) {
            if (uN[key] == uspa[upk]) {
              nameD = key;
              break;
            } else {
              nameD = na;
            }
          }
          this.breadListLast.push({
            name: nameD,
            path: pa,
          });

          if (uspa[upk] == "index") {
            this.onceRouter = true;
          } else {
            this.onceRouter = false;
          }
          if (uspa[upk] == "dataL") {
            this.breadListLast = [
              {
                name: "卡片模式",
                path: "/welcomeData/card",
              },
              {
                name: nameD,
                path: pa,
              },
            ];
          }
          if (uspa[upk] == "track") {
            this.breadListLast = [
              {
                name: "警情纪录",
                path: "/realTimePolice/real",
              },
              {
                name: nameD,
                path: pa,
              },
            ];
          }
        }
        console.log(this.breadListLast);
      } else {
        console.log("未识别到路由");
      }
    },
    //页面挂载之后,解析路由，给出面包屑，路由里面一定要含有breadCom组件的path
    mounted: function () {
      this.loadChange()
    }
  };
  },
  watch: {
    $route(to, from) {
      this.loadChange("rout");
      // console.log(to.path);
    },
  },
  //页面挂载之后,解析路由，给出面包屑，路由里面一定要含有breadCom组件的path
  mounted: function () {
    this.loadChange("moun");
  },
};
</script>
<style lang="scss" scoped>
  .breadEval {
    position: relative;
    top: -10px;
    font-size: 14px;
    height: 100%;
    background: #F3F7FD;
    .breadTitle{
      padding: 20px 30px;
      padding-left: 80px;
      background: #fff;
      .titles{
        position: absolute;
        top: 17px;
        left: 5px;
      }
.breadEval {
  position: relative;
  top: -10px;
  font-size: 14px;
  height: 100%;
  background: #f3f7fd;
  .breadTitle {
    padding: 20px 30px;
    padding-left: 80px;
    background: #fff;
    .titles {
      position: absolute;
      top: 17px;
      left: 5px;
    }
  }
}
</style>

 src/router/views/index.js

@@ -349,7 +349,7 @@
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/dataL/dataL')
    }]
},{
},{//路由占位
    path: '/dataL',
    component: Layout,
    redirect: '/dataL/hFive',
@@ -363,6 +363,60 @@
            import( /* webpackChunkName: "views" */ '@/views/dataL/hFive')
    }]
},
{
    path: '/policeInformationDistribution',
    component: Layout,
    redirect: '/policeInformationDistribution/patrolManagement',
    children: [{
        path: 'patrolManagement',
        name: '巡逻管理',
        meta: {
            i18n: 'policeInformationDistribution'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/policeInformationDistribution/patrolManagement')
    }]
},{
    path: '/policeInformationDistribution',
    component: Layout,
    redirect: '/policeInformationDistribution/policeManagementTeam',
    children: [{
        path: 'policeManagementTeam',
        name: '处警队伍管理',
        meta: {
            i18n: 'policeInformationDistribution'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/policeInformationDistribution/policeManagementTeam')
    }]
},{
    path: '/report',
    component: Layout,
    redirect: '/report/reportConfiguration',
    children: [{
        path: 'reportConfiguration',
        name: '报表配置',
        meta: {
            i18n: 'report'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/report/reportConfiguration')
    }]
},{
    path: '/report',
    component: Layout,
    redirect: '/report/announcementReport',
    children: [{
        path: 'announcementReport',
        name: '公告报表',
        meta: {
            i18n: 'report'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/report/announcementReport')
    }]
},





 src/views/dataL/hFive.vue

@@ -3,6 +3,7 @@
</template>

<script>
// 占位路由 提交激活路口
export default {

}

 src/views/policeInformationDistribution/patrolManagement.vue

New file
@@ -0,0 +1,14 @@
<template>
<iframe src="/map/index.html?openid=PatrolManagement" style="width: 100%;height: 100%" frameborder="0"></iframe>
</template>

<script>
//占位路由 巡逻管理
export default {

}
</script>

<style>

</style>

 src/views/policeInformationDistribution/policeManagementTeam.vue

New file
@@ -0,0 +1,14 @@
<template>
<iframe src="/map/index.html?openid=APoliceTeam" style="width: 100%;height: 100%" frameborder="0"></iframe>
</template>

<script>
//占位路由  处警队伍管理
export default {

}
</script>

<style>

</style>

 src/views/report/announcementReport.vue

New file
@@ -0,0 +1,14 @@
<template>
<iframe src="http://localhost:8108/ureport/preview?_u=blade-notice.ureport.xml" style="width: 100%;height: 100%" frameborder="0"></iframe>
</template>

<script>
//占位路由 公告报表
export default {

}
</script>

<style>

</style>

 src/views/report/reportConfiguration.vue

New file
@@ -0,0 +1,14 @@
<template>
<iframe src="http://localhost:8108/ureport/designer" style="width: 100%;height: 100%" frameborder="0"></iframe>
</template>

<script>
//占位路由 报表配置
export default {

}
</script>

<style>

</style>