qiankun主应用和子应用路由配置

## 前端框架初始化步骤
```bash
# 本项目修改步骤

# (有两个地方修改服务名称,在'vite.config.js','vite/plugins/index.js')
* 1.全局搜索 'ioc-comprehensive-front' 替换成你的服务名,该名称对应主系统/src/microrsList.js的 'entry'字段
对应文件有 /vite.config.js  /vite/plugins/index.js

* 2.ruoter/index.js的 'ioc-comprehensive' 替换成 对应主系统/src/microrsList.js的 'activeRule'字段

* 3.修改端口 [vite.config.js]
```


```bash
# 这是主系统 microrsList.js 的配置qiankun代码
  {
    name: 'ioc-comprehensive-front',
    entry: import.meta.env.VITE_APP_ENV === "production" ? '/ioc-comprehensive-front/':'//localhost:8008/',
    container: '#container',
    activeRule: '/ioc-comprehensive',
    props:{data: {token},name:'manager'}
  },
```

Qiankun 中,子应用内部路由的实现方式,要有两种: 1. 子应用使用自己的路由系统:子应用可以使用自己的路由系统,例如 Vue Router、React Router 等,在子应用中完成路由跳转和页面渲染。这种方式下,应用只需要将子应用加载到指定的容器中,不需要关心子应用内部的路由实现。 2. 子应用使用应用路由系统:子应用可以使用应用路由系统,例如应用使用 Vue Router 实现路由,子应用可以使用 Vue Router 进行路由跳转和页面渲染。这种方式下,应用需要将子应用加载到指定的容器中,并且在应用路由表中配置应用路由规则。 下面是第二种方式的代码示例: 首先,我们需要在应用路由表中配置应用路由规则: ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '/app1', component: () => import('@/views/App1.vue'), children: [ { path: '/app1/page1', name: 'page1', component: () => import('app1/Page1.vue'), }, { path: '/app1/page2', name: 'page2', component: () => import('app1/Page2.vue'), }, ], }, ]; const router = new VueRouter({ routes, }); export default router; ``` 在上述代码中,我们在应用路由表中定义了 `/app1` 的路由规则,并配置了两个子路由 `/app1/page1` 和 `/app1/page2`,子路由的组件分别位于子应用 `app1` 中的 `Page1.vue` 和 `Page2.vue`。 然后,在子应用中,我们需要使用 `history` 模式,并在路由模式中加上子应用的前缀,例如 `/app1`: ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App.vue'; Vue.config.productionTip = false; let instance = null; function render(props = {}) { const { container, routerBase } = props; const router = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? routerBase : '/', mode: 'history', routes: [ { path: '/app1/', component: App, children: [ { path: 'page1', name: 'page1', component: () => import('./views/Page1.vue'), }, { path: 'page2', name: 'page2', component: () => import('./views/Page2.vue'), }, ], }, ], }); 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; } ``` 在上述代码中,我们在子应用中定义了路由规则,并使用 `history` 模式进行路由跳转和页面渲染。在 `render` 函数中,我们使用 `routerBase` 参数来设置子应用的前缀,例如 `/app1`,这样就可以在应用中正确加载子应用路由规则了。 通过以上配置,我们就可以在 Qiankun 中实现子应用内部路由的跳转和页面渲染了。需要注意的是,在实现子应用内部路由时,需要确保子应用应用路由模式、路由规则等设置一致,以避免出现路由冲突和页面加载错误等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值