CodeWave集成wujie微前端路由跳转思路

路由跳转整体实现思路

  • 基座mainApp,子应用cust,contact

  • 基座首次进入子应用使用基座的路由直接拼接url

    javascript 复制代码
    XXXXX.push(`${prefix}`/`${subAppcode}`?`${subAppcode}`=`${fullPath}`)
  • 子应用内部页面间跳转还按照当前跳转方式即可(需要注意空白中转页问题)

    • 基座需要实现多页签

      • 基座定义事件$on('subAppJumpSuccess',(args)=>{ })
      • 子应用路由全局守卫,路由切换后,触发事件$emit('subAppJumpSuccess',args)
    • 跳转页面资源权限校验问题

      • 基座定义事件$on('subAppJumpFail',(args)=>{ })
      • 子应用路由全局守卫,路由切换后判断poute元信息的path是否是特殊的页面,如果是就触发事件$emit('subAppJumpFail',args)
  • 跨应用跳转使用通信的方式(注意点如下)

    • 比如custcontact跳转(/m/cust/list/m/contact/detail?id=1&title=张三

      • contact应用已经实例化,如果已经实例化则再判断当前应用的route元信息的path和要去的页面的path是否一样,如果一样的话就需要空白页中转

      • contact应用没有实例化,直接调用主应用的路由跳转方法跳转

        实现步骤
        0. 基座定义一个路由注册子应用路由的方法并挂载到基座的window对象上,用来判断子应用是否已经实例化

        1. 每个子应用都定义一个routeChange方法
        javascript 复制代码
          window.$wujie.bus.$on('routeChange',(urlObj)=>{
              const findCurRoute= window.VueRouterInstance.currentRoute
              if(urlObj.code===`${appCode}`){
                  // appCode是当前应用的应用标识
                 if(findCurRoute&&findCurRoute.path===urlObj.resourcesValue)        {
                    // 此种情况需要中转空白页承接
                 }else{
                     //直接调用
                     window.VueRouterInstance.$router.push(urlObj.fullPath)
                 }
               }
          })
          ```
        
        0.  基座定义跨应用跳转方法`jump` 通过`props`传给子应用
        
          ```
          jump(urlObj){
              const findCurRoute=window.VueRouterInstance.currentRoute
            const find=window.routeManager.subAppRouterInstances.get(urlObj.code)
            if(find){
                // 要去页面对应的应用已经实例化
                window.$wujie.bus.$emit('routeChange',urlObj)
            }else{
                // 要去页面对应应用没有实例化
                 if(findCurRoute&&findCurRoute.path===urlObj.resourcesValue)        {
                    // 出现此种情况是有问题的,一般不会出现
                 }else{
                     //直接调用
                     this.$router.push(urlObj.fullPath)
                 }
            }
          }
          ```
        
        0.
    • 回退相关

      • 回退后需要拿到当前激活的路由元信息

        复制代码
        思路保活模式可以知道回退后激活的应用是那个,根据激活的应用的编码去获取对应的子应用路由实例,拿到后获取currentRoute路由元信息
      • 回退后销毁上个页面

        xml 复制代码
        //思路1、思路是缓存的必须得是每个.vue页面的default导出内容,通过调用vue的destroy方法销毁对应实例(需要对导出的源码操作)
        // 思路2、如下
        <template>
          <!-- 通过 ref 获取 keep-alive 实例 -->
          <keep-alive ref="keepAliveRef">
            <!-- 路由视图,通过 $route.fullPath 确保路由切换时触发组件重建 -->
            <router-view :key="$route.fullPath"></router-view>
          </keep-alive>
        </template>
        <script>
        export default {
          methods: {
            clearCacheByKey(key) {
              // 获取 keep-alive 实例的缓存对象和键数组
              const { cache, keys } = this.$refs.keepAliveRef;
              if (cache[key]) {
                // 销毁组件实例,清理缓存
                cache[key].componentInstance.$destroy();
                delete cache[key];
                const index = keys.indexOf(key);
                if (index > -1) keys.splice(index, 1);
              }
            }
          }
        }
        </script>
相关推荐
程序视点26 分钟前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile31 分钟前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年38 分钟前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel
古蓬莱掌管玉米的神39 分钟前
coze娱乐ai换脸
前端
GIS之路1 小时前
GeoTools 开发合集(全)
前端
咖啡の猫1 小时前
Shell脚本-嵌套循环应用案例
前端·chrome
一点一木1 小时前
使用现代 <img> 元素实现完美图片效果(2025 深度实战版)
前端·css·html
萌萌哒草头将军2 小时前
🚀🚀🚀 告别复制粘贴,这个高效的 Vite 插件让我摸鱼🐟时间更充足了!
前端·vite·trae
布列瑟农的星空2 小时前
大话设计模式——关注点分离原则下的事件处理
前端·后端·架构
yvvvy2 小时前
前端必懂的 Cache 缓存机制详解
前端