diff --git a/docs/guide/tutorial.md b/docs/guide/tutorial.md index 5773179..1ea13ef 100644 --- a/docs/guide/tutorial.md +++ b/docs/guide/tutorial.md @@ -55,7 +55,7 @@ Micro apps are divided into projects with `webpack` and without `webpack`. The t Note: `publicPath` at runtime and `publicPath` at build time are different, and the two cannot be equivalently substituted. -2. The `history` route needs to set the route `base`, and the value is the same as its `activeRule`. At this time, the `hash` mode does not need to set the route `base` (when the `hash` is used to distinguish micro apps, the `hash` route only need to set the route `base`). +2. It is recommended to use the route of the `history` mode for the micro app. The route `base` needs to be set, and the value is the same as its `activeRule`. 3. Import `public-path.js` at the top of the entry file, modify and export three `lifecycles` functions. 4. Modify the `webpack` configuration to allow cross-domain in development environments and bundle with `umd`. @@ -77,7 +77,6 @@ Take the `react 16` project generated by `create react app` as an example, with 2. Set the `base` of `history` mode routing: ```html - ``` @@ -189,7 +188,6 @@ Take the `vue 2.x` project generated by `vue-cli 3+` as an example, and add it a function render(props = {}) { const { container } = props; router = new VueRouter({ - // hash Mode does not need to set base base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/', mode: 'history', routes, @@ -202,7 +200,7 @@ Take the `vue 2.x` project generated by `vue-cli 3+` as an example, and add it a }).$mount(container ? container.querySelector('#app') : '#app'); } - // standalone + // when run independently if (!window.__POWERED_BY_QIANKUN__) { render(); } diff --git a/docs/guide/tutorial.zh.md b/docs/guide/tutorial.zh.md index 106f4e9..5b1531d 100644 --- a/docs/guide/tutorial.zh.md +++ b/docs/guide/tutorial.zh.md @@ -55,7 +55,7 @@ start(); 注意:运行时的 publicPath 和构建时的 publicPath 是不同的,两者不能等价替代。 -2. `history` 路由需要设置路由 `base`,值和它的 `activeRule` 是一样的,此时 `hash` 模式无需设置路由 `base`(当使用 `hash` 来区分微应用时,`hash` 路由才需要设置路由 `base`)。 +2. 子应用建议使用 `history` 模式的路由,需要设置路由 `base`,值和它的 `activeRule` 是一样的。 3. 在入口文件最顶部引入 `public-path.js`,修改并导出三个生命周期函数。 4. 修改 `webpack` 打包,允许开发环境跨域和 `umd` 打包。 @@ -77,7 +77,6 @@ start(); 2. 设置 `history` 模式路由的 `base`: ```html - ``` @@ -94,16 +93,6 @@ start(); ReactDOM.render(, container ? container.querySelector('#root') : document.querySelector('#root')); } - function storeTest(props) { - props.onGlobalStateChange((value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev), true); - props.setGlobalState({ - ignore: props.name, - user: { - name: props.name, - }, - }); - } - if (!window.__POWERED_BY_QIANKUN__) { render({}); } @@ -114,7 +103,6 @@ start(); export async function mount(props) { console.log('[react16] props from main framework', props); - storeTest(props); render(props); } @@ -200,7 +188,6 @@ start(); function render(props = {}) { const { container } = props; router = new VueRouter({ - // hash 模式不需要设置 base base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/', mode: 'history', routes, @@ -218,27 +205,11 @@ start(); render(); } - function storeTest(props) { - props.onGlobalStateChange && - props.onGlobalStateChange( - (value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev), - true, - ); - props.setGlobalState && - props.setGlobalState({ - ignore: props.name, - user: { - name: props.name, - }, - }); - } - export async function bootstrap() { console.log('[vue] vue app bootstraped'); } export async function mount(props) { console.log('[vue] props from main framework', props); - storeTest(props); // 测试双向传递数据 render(props); } export async function unmount() {