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.vue
export 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.vue
let closeOtherTab = () => {
action.setGlobalState({
changeMicoTabsPath: {
type: 'closeOtherTab',
path: '/app1/about',
},
})
}
如果感觉有用的话, 还请给个 Star 标签😁😁😁