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