微前端qiankun主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例

更新時間：2023年08月21日 11:37:50 作者：黑蘿卜不黑

這篇文章主要為大家介紹了微前端qiankun主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

具體需求

一個后臺管理系統(tǒng)，子應(yīng)用中的token時效后，接口請求報錯，這時候需要跳轉(zhuǎn)到主應(yīng)用中的登錄頁面。

傳遞一個登錄方法

在主應(yīng)用調(diào)用子應(yīng)用

傳遞一個登錄方法，在有需要的地方調(diào)用該方法。

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('加載子應(yīng)用前，加載進(jìn)度條=', 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('加載子應(yīng)用前，進(jìn)度條加載完成', app.name)
    return Promise.resolve()
  }
} );
// 啟動 qiankun
start();

子應(yīng)用接收主應(yīng)用傳遞的參數(shù)和方法

并在有需要的地方使用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');
// 將主應(yīng)用的函數(shù)掛到原生上方便調(diào)用
  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()方式進(jìn)行跳轉(zhuǎn)

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

主應(yīng)用開啟qiankun并向子應(yīng)用傳遞數(shù)據(jù)

將主應(yīng)用的路由在吊起子應(yīng)用時傳遞過去，使用主應(yīng)用的路由完成跳轉(zhuǎn)。但是嘗試未能成功，有采用這條思路做對的小伙伴可以給個建議。

主應(yīng)用開啟qiankun并向子應(yīng)用傳遞數(shù)據(jù)

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('加載子應(yīng)用前，加載進(jìn)度條=', app.name)
    const data = {
      token: 'admin',
    }
    app.props.data = data
    // 向子應(yīng)用傳遞路由
    app.props.mainRouter = router
    return Promise.resolve()
  },
  // qiankun 生命周期鉤子 - 掛載后
  afterMount: (app) => {
    console.log('加載子應(yīng)用前，進(jìn)度條加載完成', app.name)
    return Promise.resolve()
  }
} );
// 啟動 qiankun
start();

子應(yīng)用接收數(shù)據(jù)，在需要更改到主路由的地方使用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');
// 將主應(yīng)用的函數(shù)掛到原生上方便調(diào)用
 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主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例的詳細(xì)內(nèi)容，更多關(guān)于qiankun主應(yīng)用子應(yīng)用跳轉(zhuǎn)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: