前端微服务架构2-路由配置

先声明我的项目使用的是history路由，hash路由的坑没有踩

父应用的路由

{
        path: '/compliancePromotion/:pathMatch(.*)*', //微服务，由于子应用可能还有二级菜单，所以子应用的所有菜单都得匹配上
        name: 'compliancePromotion',
        component: resolve => require(["@/components/compliancePromotion"], resolve),
},

子应用的页面

<template>
    <!-- 跳转子应用 -->
    <div>
        <v-header></v-header>
        <div id="wfw1"></div>     //子应用将挂在在这里
    </div>
</template>
<script>
export default {
  name: 'App',
  mounted () {
   
  }
}
</script>

父应用已经声明子应用匹配的路由是：activeRule: '/compliancePromotion', 

所有子应用的根路径就是：/compliancePromotion

子应用的路由结构

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/compliancePromotion', //根路由
    name: 'Home',
    component: resolve => require(['@/views/complianceHome'], resolve),
    children: [
      {
        path: 'data',  //二级路由
        name: 'data',
        component: () => import('@/views/compliancePages/pageBox.vue'),
        children: [
          {
            path: 'weMedia', //三级路由
            name: 'weMedia',
            component: () => import('@/views/compliancePages/weMedia.vue')
          },
        ]
      },
      {
        path: 'lexicon',
        name: 'lexicon',
        component: () => import('@/views/compliancePages/pageBox.vue'),
        children: [
          {
            path: 'violation',
            name: 'violation',
            component: () => import('@/views/compliancePages/violation.vue')
          },
          {
            path: 'compliance',
            name: 'compliance',
            component: () => import('@/views/compliancePages/compliance.vue')
          },
          {
            path: 'suspected',
            name: 'suspected',
            component: () => import('@/views/compliancePages/suspected.vue')
          },
        ]
      },
    ]
  }
]
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) { //防止路由跳转相同路由报错
  return VueRouterPush.call(this, to).catch(err => err)
}

export default routes