hql7 / wl-micro-frontends

Micro front end practical project tutorial. 微前端项目实战vue项目。基于vue3.0&qiankun2.0进阶版:https://github.com/wl-ui/wl-mfe
http://mfe.wlui.com.cn/
Apache License 2.0
512 stars 129 forks source link

父应用是否不能使用vue-router? #9

Open DevyRvan opened 4 years ago

DevyRvan commented 4 years ago

你好,我最近也在搞微前端 由于qiankun对子系统的跳转也是用到了跟vueRouter一样的h5的history 所以qiankun这边主应用的 <div id="root-view" class="app-view-box" v-html="content"></div> 不能写在<router-view />里的组件,否则也会刷新掉页面无法获得,因此只能写在App.vue里面,这样导致侧栏跟标签页等也只能写在App.vue,甚至也不能使用VueRouter。 请教下你是否有解决方案或者思路?

hql7 commented 4 years ago

目前设计的主应用是只有基础框架和共用部分,还有设计过你这种需求,如果主应用有足够多的逻辑处理,可以将其拆出来作为另一个子应用

在 2020-03-19 14:30:52,"DevyRvan" notifications@github.com 写道:

你好,我最近也在搞微前端 由于qiankun对子系统的跳转也是用到了跟vueRouter一样的h5的history 所以qiankun这边主应用的

不能写在里的组件,否则也会刷新掉页面无法获得,因此只能写在App.vue里面,这样导致侧栏跟标签页等也只能写在App.vue,甚至也不能使用VueRouter。 请教下你是否有解决方案或者思路?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

Jenniferyingni commented 4 years ago

@DevyRvan
从楼主这里找父子应用通信解决方案正好看到这个问题

我自己项目portal中使用了vue-router,不知道是不是你要的解决方案

https://github.com/Jenniferyingni/vue-cli-plugin-qiankun demo文件夹下

DevyRvan commented 4 years ago

@Jenniferyingni 十分感谢你的回答,我现在的方案跟你项目的做法差不多

子系统入口跟<router-view/>都放在App.vue,但是这样会导致<nav-bar/>是会一直存在的了

现在有个需求是搞一个登录页,不需要<nav-bar/>,未来需求应该也会出现类似整个页面替换的router页面

所以想把<div class="appContainer" v-html="content">content</div>放在<router-view/>里的组件内,发现这样跟router有冲突

现在我的暂定解决方案是把登录的页面作为组件放在App.vue,用v-if配合登录逻辑来展示(当然这个做法很low),有时间再捣鼓一下,如果你有好的解决方案随时艾特。

再次感谢你的回答。

ghost commented 4 years ago

@DevyRvan 我现在也有同样的需求,按照你说的把登录作为组件放在App.vue中,那么默认启动的子应用应该怎么写呢?前端小菜,希望能指点下