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

 更新时间:2023年08月21日 11:37:50   作者:黑萝卜不黑  
这篇文章主要为大家介绍了微前端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主应用子应用跳转的资料请关注脚本之家其它相关文章!

相关文章

  • Vue 中 onclick和@click区别解析

    Vue 中 onclick和@click区别解析

    这篇文章主要介绍了Vue 中 onclick和@click区别,简单点说就是onclick 只能触发 js的原生方法,不能触发vue的封装方法,@click 只能触发vue的封装方法,不能触发js的原生方法,需要的朋友可以参考下
    2024-02-02
  • vue3使用element-plus搭建后台管理系统之菜单管理功能

    vue3使用element-plus搭建后台管理系统之菜单管理功能

    这篇文章主要介绍了vue3使用element-plus搭建后台管理系统之菜单管理,使用element-plus el-tree组件快速开发树形菜单结构,el-tree组件中filter-node-method事件便可以实现树形菜单筛选过滤功能,需要的朋友可以参考下
    2022-04-04
  • vue中控制mock在开发环境使用,在生产环境禁用方式

    vue中控制mock在开发环境使用,在生产环境禁用方式

    这篇文章主要介绍了vue中控制mock在开发环境使用,在生产环境禁用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue实现点击按钮“查看详情”弹窗展示详情列表操作

    vue实现点击按钮“查看详情”弹窗展示详情列表操作

    这篇文章主要介绍了vue实现点击按钮“查看详情”弹窗展示详情列表操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 详解如何添加babel polyfill

    详解如何添加babel polyfill

    这篇文章主要介绍了详解vue如何添加babel polyfill实现方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 分析总结20道Vue高频面试题

    分析总结20道Vue高频面试题

    这篇文章主要为大家介绍了分析总结20道Vue高频面试题示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • vue3  mark.js 实现文字标注功能(案例代码)

    vue3  mark.js 实现文字标注功能(案例代码)

    这篇文章主要介绍了vue3  mark.js 实现文字标注功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 详解Vue 如何监听Array的变化

    详解Vue 如何监听Array的变化

    这篇文章主要介绍了详解Vue 如何监听Array的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • vue中的eventBus会不会产生内存泄漏你知道吗

    vue中的eventBus会不会产生内存泄漏你知道吗

    这篇文章主要为大家详细介绍了vue中的eventBus会不会产生内存泄漏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • vue如何判断安卓还是IOS

    vue如何判断安卓还是IOS

    这篇文章主要介绍了vue如何判断安卓还是IOS,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论