微前端qiankun主应用与子应用之间的跳转示例
作者：黑萝卜不黑
这篇文章主要为大家介绍了微前端qiankun主应用与子应用之间的跳转示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
具体需求
一个后台管理系统，子应用中的token时效后，接口请求报错，这时候需要跳转到主应用中的登录页面。
传递一个登录方法
在主应用调用子应用
传递一个登录方法，在有需要的地方调用该方法。
import { registerMicroApps, start } from 'qiankun';
import router from '@/router'
const apps = [
{
name: 'sonApp',
entry: '//localhost:8080',
container: '#container',
activeRule: '/son-app',
}
]
registerMicroApps(apps,{
// qiankun 生命周期钩子 - 加载前
beforeLoad: (app) => {
console.log('加载子应用前，加载进度条=', app.name)
const data = {
token: 'admin',
}
app.props.data = data
// 退出方法
app.props.reRegister = () => {
store.dispatch('LogOut').then(() => {
sessionStorage.removeItem('tabViews')
location.reload()
console.log('重新登录~')
})
}
return Promise.resolve()
},
// qiankun 生命周期钩子 - 挂载后
afterMount: (app) => {
console.log('加载子应用前，进度条加载完成', app.name)
return Promise.resolve()
}
} );
// 启动 qiankun
start();子应用接收主应用传递的参数和方法
并在有需要的地方使用Vue.prototype.$baseReRegister()
import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';
Vue.config.productionTip = false;
let router = null;
let instance = null;
function render(props = {}) {
const { container, mainRouter } = props;
router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
mode: 'history',
routes,
});
instance = new Vue({
router,
store,
render: (h) => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
// 将主应用的函数挂到原生上方便调用
Vue.prototype.$baseReRegister = reRegister
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {
console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
console.log('[vue] props from main framework', props);
render(props);
}
export async function unmount() {
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
router = null;
}通过history.pushState()方式进行跳转
window.history.pushState({
user: {}
}, '', '/login')}
主应用开启qiankun并向子应用传递数据
将主应用的路由在吊起子应用时传递过去，使用主应用的路由完成跳转。但是尝试未能成功，有采用这条思路做对的小伙伴可以给个建议。
主应用开启qiankun并向子应用传递数据
import { registerMicroApps, start } from 'qiankun';
import router from '@/router'
const apps = [
{
name: 'sonApp',
entry: '//localhost:8080',
container: '#container',
activeRule: '/son-app',
}
]
registerMicroApps(apps,{
// qiankun 生命周期钩子 - 加载前
beforeLoad: (app) => {
console.log('加载子应用前，加载进度条=', app.name)
const data = {
token: 'admin',
}
app.props.data = data
// 向子应用传递路由
app.props.mainRouter = router
return Promise.resolve()
},
// qiankun 生命周期钩子 - 挂载后
afterMount: (app) => {
console.log('加载子应用前，进度条加载完成', app.name)
return Promise.resolve()
}
} );
// 启动 qiankun
start();子应用接收数据，在需要更改到主路由的地方使用Vue.prototype.parentRouter
import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';
Vue.config.productionTip = false;
let router = null;
let instance = null;
function render(props = {}) {
const { container, mainRouter } = props;
router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
mode: 'history',
routes,
});
instance = new Vue({
router,
store,
render: (h) => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
// 将主应用的函数挂到原生上方便调用
Vue.prototype.parentRouter = mainRouter
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {
console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
console.log('[vue] props from main framework', props);
render(props);
}
export async function unmount() {
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
router = null;
}以上就是微前端qiankun主应用与子应用之间的跳转示例的详细内容，更多关于qiankun主应用子应用跳转的资料请关注脚本之家其它相关文章！