這是一個(gè)我在開發(fā)時(shí)遺留的坑顷霹，之前一直沒填咪惠，剛好最近有時(shí)間，網(wǎng)上查找了一些資料淋淀，把這個(gè)坑給填了ＲＣ痢！！
具體需求：
一個(gè)后臺(tái)管理系統(tǒng)渠鸽，子應(yīng)用中的token時(shí)效后叫乌，接口請(qǐng)求報(bào)錯(cuò)，這時(shí)候需要跳轉(zhuǎn)到主應(yīng)用中的登錄頁(yè)面徽缚。
1憨奸、今日思路：
在主應(yīng)用吊子應(yīng)用時(shí)，傳遞一個(gè)登錄方法凿试，在有需要的地方調(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()
}
} );
// 啟動(dòng) 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
}
// 獨(dú)立運(yùn)行時(shí)
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、網(wǎng)友思路：
通過history.pushState()方式進(jìn)行跳轉(zhuǎn)
window.history.pushState({
user: {}
}, '', '/login')}
3详炬、最初思路：
將主應(yīng)用的路由在吊起子應(yīng)用時(shí)傳遞過去盐类，使用主應(yīng)用的路由完成跳轉(zhuǎn)。但是嘗試未能成功呛谜，有采用這條思路做對(duì)的小伙伴可以給個(gè)建議在跳。
主應(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()
}
} );
// 啟動(dòng) 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
}
// 獨(dú)立運(yùn)行時(shí)
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;
}
