qiankun中主应用和子应用都是vue2框架,路由模式都为hash,且publicPath都不一样,在注册启动后报错,并且什么样的路由会命中微应用规则
时间: 2024-06-05 21:10:42 浏览: 9
关于 qiankun 中主应用和子应用报错的问题,可能是由于路由模式不同导致的,建议将主应用和子应用的路由模式都改为 `history`,并且确保所有应用的 `publicPath` 都正确配置。
路由命中微应用规则的条件如下:
1. 路径要以微应用的 `activePath` 开头;
2. 如果微应用的 `exact` 属性为 `true`,则路径需要与 `activePath` 完全匹配;
3. 如果微应用的 `exact` 属性为 `false`,则路径只需要匹配到 `activePath` 即可。
举个例子,如果一个微应用的 `activePath` 为 `/app1`,那么以下路径都会命中该微应用:
- `/app1`
- `/app1/page1`
- `/app1/page2`
- `/app1/subapp1`
但以下路径不会命中该微应用:
- `/app1page1`
- `/app1page2`
- `/app2/page1`
相关问题
vue的qiankun子应用为什么hash路由跳转不成功
在使用 Qiankun 开发子应用时,如果子应用使用的是 hash 模式路由,需要在子应用的入口文件中,手动初始化路由。
在 Vue 的子应用中,可以在 `main.js` 文件中进行路由初始化,具体实现如下:
```
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
// 手动初始化路由
let instance = null
function render(props = {}) {
const { container } = props
instance = new Vue({
router,
render: h => h(App)
}).$mount(container ? container.querySelector('#app') : '#app')
}
// 如果不是作为子应用使用,则直接渲染应用
if (!window.__POWERED_BY_QIANKUN__) {
render()
}
// 导出生命周期钩子函数
export async function bootstrap() {}
export async function mount(props) {
// 初始化路由
render(props)
}
export async function unmount() {
// 销毁实例
instance.$destroy()
instance = null
}
```
在这里,我们通过 `render` 函数手动初始化了路由,并在 `mount` 钩子中再次调用 `render` 函数,以保证子应用在挂载时能够正确初始化路由。
另外,需要注意的是,在切换子应用时,主应用会将当前的路由信息传递给子应用,因此,子应用需要在接收到这些信息后自行进行路由跳转。你可以通过监听 `qiankun` 的 `routeChange` 事件来实现这个功能,具体实现如下:
```
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
// 手动初始化路由
let instance = null
function render(props = {}) {
const { container } = props
instance = new Vue({
router,
render: h => h(App)
}).$mount(container ? container.querySelector('#app') : '#app')
}
// 如果不是作为子应用使用,则直接渲染应用
if (!window.__POWERED_BY_QIANKUN__) {
render()
}
// 导出生命周期钩子函数
export async function bootstrap() {}
export async function mount(props) {
// 初始化路由
render(props)
// 监听 routeChange 事件
props.onGlobalStateChange((state, prev) => {
if (state.type === 'vue2_subapp_route_change') {
const { path } = state.payload
router.push(path)
}
})
}
export async function unmount() {
// 销毁实例
instance.$destroy()
instance = null
}
```
在这里,我们通过 `props.onGlobalStateChange` 监听 `routeChange` 事件,并在事件回调函数中跳转路由。当主应用切换路由时,会触发这个事件,从而实现路由跳转。
qiankun微前端是什么?用户模块只在主应用还是主应用和子应用都有,子应用可以独立运行那还要主应用干嘛
qiankun是一个微前端框架,它可以将多个独立开发的子应用整合到同一个主应用中,实现统一的前端界面。主应用和子应用可以分别由不同的团队开发和维护,通过qiankun进行集成。
在qiankun中,用户模块可以存在于主应用或者子应用中,具体取决于你的需求和架构设计。如果用户模块只在主应用中存在,那么所有的子应用都将共享主应用的用户模块,子应用无需自己实现用户认证和权限控制等功能。
但是,即使子应用可以独立运行,还是需要主应用的存在。主应用在整个微前端架构中起到了协调和管理的作用。它负责加载和卸载子应用,并提供了路由、状态管理、全局样式等共享能力。主应用还可以处理跨子应用的通信和事件传递,实现子应用之间的交互。
因此,主应用在qiankun中的作用是不可或缺的,它提供了整个微前端架构的核心功能,并为子应用提供了共享的基础设施。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)