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)

跨应用跳转使用通信的方式（注意点如下）

比如cust往contact跳转（/m/cust/list到/m/contact/detail?id=1&title=张三）

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

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

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

每个子应用都定义一个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>