点击不同的菜单显示显示子应用不同页面

[ztaom]

在主工程中，如何通过点击不同的菜单显示显示子工程不同的页面，菜单会添加到多页签中，方便切换

[yiludege]

这是一个好问题，后续官方会出专门的demo来指导

假如主应用 有A、B、C三个菜单对应子应用 subapp 的 a、b、c 三个页面

1、子应用如果是运行在单例模式下（做了生命周期适配），那么 A、B、C 菜单对应的主应用的页面中 <wujie-vue>标签的 name 设置成相同名字，url 对应子应用 a、b、c 页面的url即可

这样可以共享一个wujie实例，承载子应用js的iframe也实现了共享，不用页面子应用的url不同，切换菜单的过程相当于：销毁当前应用实例 => 同步新路由 => 创建新应用实例

2、子应用如果运行在保活模式下（alive=ture），那么，在主应用的不同页面中 只要 name 相同子应用就不会销毁新建，一直复用之前渲染出来的实例，这个时候怎么办呢，可以采用通信的方式

主应用切换菜单栏的时候调用: bus.$emit('route-change', path)

子应用在app.vue 的 mounted 生命周期可以监听：

  mounted() {
    if (window.__POWERED_BY_WUJIE__) {
      window.$wujie.bus.$on("route-change", (path) => {
        this.$router.push({ path: `/${path}` });
      });
    }
  },

3、子应用运行在重建模式下（alive=false && 没有做生命周期适配），按照 1 即可

[ztaom]

希望出一个demo，目前试了一下保活模式，在主工程中，只有先点击到子应用之后，再点击菜单才能正常切换

[yiludege]

@ztaom 可能要到周末才能有时间

[SericXu]

使用第一种方法的话，是不是就需要在主应用中配置多个子应用标签，分别对应主应用的菜单？
如果是这样的话，我想在主应用动态生成子应用菜单（想偷懒orz）的这种情况下是不是就有点麻烦？有没有办法可以实现去匹配子应用路由。比如通过给子应用添加某个属性或者Api以供调用。

[yiludege]

@SericXu 我周末出一个demo哈，不用多个子应用标签，一个子应用标签，动态 url 就好了

[SericXu]

@SericXu 我周末出一个demo哈，不用多个子应用标签，一个子应用标签，动态 url 就好了

动态url确实可以，这个我想过，这么一来，是不是我就得在主应用去配置好所有的子应用的路由。总感觉有点别扭，说不出来 XD，等后续我再琢磨琢磨怎么个意思。哈哈

我在想有没有可能实现在主应用打开子应用页面的时候，我传一个router对象或者path之类的参数，使子应用打开指定的页面。这样是不是更方便一点。

[yiludege]

可以的，直接方式 2 保活模式，主应用直接告诉子应用要怎么跳，子应用根据参数自行跳转，这样也就解耦了

[yiludege]

@ztaom @SericXu demo已经出了，可以参照demo来应对这个场景

[SericXu]

@yiludege 我按照demo改了一下，现在初始化第一次点击菜单没问题，再切换另一个菜单vue router会报错，不知是不是版本问题，我用的路由版本vue-router@4.1.3；详情如下：

初始化页面：

第一次点击菜单，没问题：

切换菜单，页面无反应，vue-router报错：

[SericXu]

另外，当采用preloadApp的时候，无论preloadApp是否开启保活，WujieVue标签是不是不能再使用alive保活属性？

当我给标签也添加保活属性是，会打开子应用，但是空白，貌似路由没有加在路由上。类似这样的情况：
正确路由 => http://localhost:3000/assets/collect?assets=%2Fcollect
实际路由 => http://localhost:3000/assets/collect?assets=%2F

[yiludege]

@yiludege 我按照demo改了一下，现在初始化第一次点击菜单没问题，再切换另一个菜单vue router会报错，不知是不是版本问题

demo中，vue3、vite的 router都是4.x的版本，保活模式按照demo即可，单例模式下，window.__WUJIE_MOUNT每次新建路由

[yiludege]

另外，当采用preloadApp的时候，无论preloadApp是否开启保活

preloadApp的 url 和 wujie-vue 的 url 保持一致呢？

[SericXu]

demo中，vue3、vite的 router都是4.x的版本，保活模式按照demo即可，单例模式下，window.__WUJIE_MOUNT每次新建路由

---

以下是我目前的代码，配置基本都和demo一致

子应用配置

// main.js
if (window.__POWERED_BY_WUJIE__) {
  let instance;
  window.__WUJIE_MOUNT = () => {
    
    const router = createRouter({ history: createWebHistory(), routes })
    instance = createApp(App)
    instance.use(router);
    instance.mount("#app");
  };
  window.__WUJIE_UNMOUNT = () => {
    instance.unmount();
  };
  window.__WUJIE.mount()
} else {
  createApp(App)
  .use(createRouter({ history: createWebHistory(), routes }))
  .mount("#app");
}

// router
const router = createRouter({
    history: createWebHistory(),
    routes: [{
        path: '/',
        children:[
            {
                path: 'home',
                name: 'home',
                component: Home
            },
            {
                path: 'collect',
                name: 'collect',
                component: Collect
            },
            {
                path: 'offline_assets',
                name: 'offline_assets',
                component: OfflineAssets
            },
        ]
    }]
})

父应用配置

// 标签
<WujieVue
        width="100%"
        height="100%"
        name="assets"
        :url="url" // url = ref("//localhost:4000/" + (route.params.path ? `${route.params.path}` : ""))
        :sync="true"
        :fetch="fetch"
        :props="props"
        :beforeLoad="lifecycles.beforeLoad"
        :beforeMount="lifecycles.beforeMount"
        :afterMount="lifecycles.afterMount"
        :beforeUnmount="lifecycles.beforeUnmount"
        :afterUnmount="lifecycles.afterUnmount"
        :activated="lifecycles.activated"
        :deactivated="lifecycles.deactivated"
        :loadError="lifecycles.loadError"
    ></WujieVue>

// router
const router = createRouter({
    history: createWebHistory(),
    routes: [{
        path: 'home',
        name: 'home',
        component: Home,
    },
    {
        path: '/assets/:path',
        name: 'assets',
        component: Assets
    }]
})

[yiludege]

:alive="true" 的话，需要采用通信的方式来跳转，详情看看vue3的这个demo呢

主应用：

子应用：

[SericXu]

---

已解决

@yiludege 我按照demo改了一下，现在初始化第一次点击菜单没问题，再切换另一个菜单vue router会报错，不知是不是版本问题，我用的路由版本vue-router@4.1.3；详情如下：

---

首先，子应用路由不激活的问题已解决，友情提醒，router-view的key很重要！！！：

其次，切换菜单时vue-router 报错 警告，导致子应用路由没有匹配，可能是报错导致中断了，还在踩坑中；
具体警告如下：

[Vue Router warn]: history.state seems to have been manually replaced without preserving the necessary values. Make sure to preserve existing history state if you are manually calling history.replaceState:

history.replaceState(history.state, '', url)

You can find more information at https://next.router.vuejs.org/guide/migration/#usage-of-history-state.

[fk4566]

已解决

@yiludege 我按照demo改了一下，现在初始化第一次点击菜单没问题，再切换另一个菜单vue router会报错，不知是不是版本问题，我用的路由版本vue-router@4.1.3；详情如下：

首先，子应用路由不激活的问题已解决，友情提醒，router-view的key很重要！！！：

其次，切换菜单时vue-router 报错 警告，导致子应用路由没有匹配，可能是报错导致中断了，还在踩坑中；
具体警告如下：

[Vue Router warn]: history.state seems to have been manually replaced without preserving the necessary values. Make sure to preserve existing history state if you are manually calling history.replaceState:

history.replaceState(history.state, '', url)

You can find more information at https://next.router.vuejs.org/guide/migration/#usage-of-history-state.

请问大佬，你这个问题解决了吗？能发一个demo参考一下吗？