Vue3.0 + qiankun.js 实现多tab标签页路由切换
Github地址
原理是通过监听主利用的vue-router的 router.beforeEach 办法来动静加载(loadMicroApp)微利用页面用vuex来治理已加载的微利用和tab标签数据监听用initialState的变动来执行对微页面外部的路由跳转各依赖版本"element-plus": "^1.3.0-beta.5","qiankun": "^2.6.3","vue": "^3.0.0","vue-router": "^4.0.0-0","vuex": "^4.0.0-0"Gif演示
路由配置批改
主利用应用的是: createWebHistory();微利用应用的是: createMemoryHistory(window.__POWERED_BY_QIANKUN__ ? '' : `/subPages/app1/`);每个vue文件都要定义 [name] 属性, 并且要与 router/index.js 外部定义页面参数的 [name] 雷同 如:lib: src/views/user.vueexport default { name: 'App1Detail', >>>===== setup() {}, | methods: {}, | ... |} | |=====>>> 2个name的值要雷同... |lib: src/router/index.js | routes = [ | { | path: appPath + '/detail', | name: 'App1Detail', <<<===== component: () => import( '@/views/app1/detail.vue') } ]路由应用办法
主利用中路由跳转
主利用应用的是原生的vue-router的办法无论是在主利用中跳转主利用页面 主=>主利用页面还是在主利用中跳转微利用页面 主=>微利用页面router.push()router.replace()router.go(-1)...微利用中路由跳转
微利用跳转本身页面也和原生的vue-router的应用办法统一参考lib: app2/src/views/user/**router.push()router.replace()router.go(-1)...============================ 分割线 =================================从A微利用跳转B微利用的子页面, 如:参考lib: app1/src/views/about.vue... import { getCurrentInstance } from 'vue' setup() { const instance = getCurrentInstance() let jump = () => { instance.appContext.config.globalProperties.$parentRouter.push('/app2/user') } return { jump } }...============================ 分割线 =================================在微利用中敞开以后沉闷的tab标签,如:参考lib: app1/src/views/user.vue let closeActiveTab = () => { action.setGlobalState({ changeMicoTabsPath: { type: 'closeActiveTab', }, })}============================ 分割线 =================================在微利用中敞开以后已加载的其余tab标签,如:参考lib: app1/src/views/user.vuelet closeOtherTab = () => { action.setGlobalState({ changeMicoTabsPath: { type: 'closeOtherTab', path: '/app1/about', }, })}如果感觉有用的话,还请给个Star标签