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>
相关推荐
ikun778g8 分钟前
uniapp设置安全区
前端·javascript·vue.js·ui·uni-app
IT_陈寒21 分钟前
React Hooks 实战:这5个自定义Hook让我开发效率提升了40%
前端·人工智能·后端
三月的一天1 小时前
React单位转换系统:设计灵活的单位系统与单位系统转换方案
前端·javascript·react.js
xiaoyan20151 小时前
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
前端·vue.js·electron
梅孔立1 小时前
本地多版本 Node.js 切换指南:解决 Vue nodejs 等项目版本冲突问题
前端·vue.js·node.js
小红1 小时前
从乱码到清晰:深入理解字符编码的演进(ASCII到UTF-8)
前端
卓码软件测评1 小时前
K6的CI/CD集成在云原生应用的性能测试应用
前端·功能测试·测试工具·ci/cd·云原生
JordanHaidee2 小时前
【Rust GUI开发入门】编写一个本地音乐播放器(11. 支持动态明暗主题切换)
前端·ui kit
爱泡脚的鸡腿2 小时前
VUE移动端项目跟练2(简洁易懂)
前端·javascript·vue.js
拜晨2 小时前
用 MCP 把自己的接口接入 AI
前端·node.js