微前端:qiankun 主应用与子应用之间的跳转

这是一个我在开发时遗留的坑,之前一直没填,刚好最近有时间,网上查找了一些资料,把这个坑给填了!!!

具体需求:

一个后台管理系统,子应用中的token时效后,接口请求报错,这时候需要跳转到主应用中的登录页面。
1、今日思路:
在主应用吊子应用时,传递一个登录方法,在有需要的地方调用该方法。

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;
}

2、网友思路:
通过history.pushState()方式进行跳转

 window.history.pushState({
       user: {}
     }, '', '/login')}

3、最初思路:
将主应用的路由在吊起子应用时传递过去,使用主应用的路由完成跳转。但是尝试未能成功,有采用这条思路做对的小伙伴可以给个建议。
主应用开启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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值