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>
相关推荐
JuneXcy7 分钟前
11.Layout-Pinia优化重复请求
前端·javascript·css
子洋17 分钟前
快速目录跳转工具 zoxide 使用指南
前端·后端·shell
天下无贼!18 分钟前
【自制组件库】从零到一实现属于自己的 Vue3 组件库!!!
前端·javascript·vue.js·ui·架构·scss
CF14年老兵38 分钟前
✅ Next.js 渲染速查表
前端·react.js·next.js
司宸1 小时前
学习笔记八 —— 虚拟DOM diff算法 fiber原理
前端
阳树阳树1 小时前
JSON.parse 与 JSON.stringify 可能引发的问题
前端
让辣条自由翱翔1 小时前
总结一下Vue的组件通信
前端
dyb1 小时前
开箱即用的Next.js SSR企业级开发模板
前端·react.js·next.js
前端的日常1 小时前
Vite 如何处理静态资源?
前端
前端的日常1 小时前
如何在 Vite 中配置路由?
前端