关于vue.js:Vue30-qiankunjs-实现多tab标签页路由切换

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 标签😁😁😁