qiankun在主应用的某个路由页面加载子应用（vue篇）

前题

vue-router的mode

hash和history的区别

hash

1.url地址中带有#

2.不能随意的修改path地址

3.在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history

1.页面刷新重新请求接口

2.可以随意修改path地址，可以进入404

乾坤微应用路由加载

主应用、子应用mode为hash

主应用配置

main.js

registerMicroApps([
	{
		name: 'vue_base',			// 子应用名称
		entry: '//localhost:8083',	// 子应用入口
		container: '#container',	// 子应用所在容器
		activeRule: '#/login/register',		// 子应用触发规则（路径）
		// props:{ actions, msg:'w'}//
	},
	{
		name: 'purehtml',
		entry: '//localhost:8080',
		container: '#container',	// 子应用所在容器
		activeRule: '/purehtml'
	}
]
	, {
		// qiankun 生命周期钩子 - 微应用加载前
		beforeLoad: (app) => {
			console.log('before load', app.name);
			return Promise.resolve();
		},
		// qiankun 生命周期钩子 - 微应用挂载后
		afterMount: (app) => {
			console.log('after mount', app.name);
			return Promise.resolve();
		}
	}
);

router index.js

mode: 'hash'
routes: [{
			path: '/login/*',
			name: 'Register',
			component: register
       },
       {
			path: '/login',
			name: 'Login',
			component: login
        }
       ]

register.vue

<h3 @click="push('#/login/register/deviceMessage')">click to qiankun-app ！！！</h3>
import { start } from 'qiankun';
push(subapp) {
      start()
      history.pushState(null, subapp, subapp);
},

子应用配置

router index.js

  mode: 'hash',
  {
			path: '/login/register/deviceMessage',（重要：与主应用路由一致）
			name: 'DeviceMessage',
			component: deviceMessage
  },

主应用、子应用mode为history

主应用配置

main.js

registerMicroApps([
	{
		name: 'vue_base',			// 子应用名称
		entry: '//localhost:8083',	// 子应用入口
		container: '#container',	// 子应用所在容器
		activeRule: '/login/register',		// 子应用触发规则（路径）
		// props:{ actions, msg:'w'}//
	},
	{
		name: 'purehtml',
		entry: '//localhost:8080',
		container: '#container',	// 子应用所在容器
		activeRule: '/purehtml'
	}
]
	, {
		// qiankun 生命周期钩子 - 微应用加载前
		beforeLoad: (app) => {
			console.log('before load', app.name);
			return Promise.resolve();
		},
		// qiankun 生命周期钩子 - 微应用挂载后
		afterMount: (app) => {
			console.log('after mount', app.name);
			return Promise.resolve();
		}
	}
);

router index.js

mode: 'history',
routes: [
                {
			path: '/login',
			name: 'Login',
			component: login
		},
                {
			path: '/login/*',
			name: 'Register',
			component: register
		},
                
]

register.vue

<h3 @click="push('/login/register/deviceMessage')">click to qiankun-app ！！！</h3>
import { start } from 'qiankun';
push(subapp) {
      start()
      history.pushState(null, subapp, subapp);
},

子应用配置

router index.js

mode: 'history',
base: '/login/register',
routes: [
                {
			path: '/deviceMessage',
			name: 'DeviceMessage',
			component: deviceMessage
		}
]