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>
相关推荐
艾小码12 分钟前
ES6+革命:8大特性让你的JavaScript代码质量翻倍
前端·javascript
两个西柚呀16 分钟前
Vue组件的一些底层细节
前端·javascript·vue.js
IT技术分享社区19 分钟前
前端:浏览器Content Security Policy 安全策略介绍和用法
前端·前端开发
林强1814 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散7 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan7 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇7 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15888 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追9 小时前
Vue组件化开发
前端·html
艾德金的溪9 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存