感觉在真正加载子应用之前,干了很多没用的代码。 其实可以直接利用主应用自身的router路由拦截器来加载子应用。

来源:5-5 微前端框架 - 获取首个子应用

weixin_慕前端5373056

2021-09-09

import { createRouter, createWebHashHistory } from 'vue-router';
export default createRouter({
  history: createWebHashHistory(),
  // base: '/',
  // linkActiveClass: 'active', // 更改激活状态的Class值
  routes: [
	    {
		    path: '/admin',
		    component: () => import('@/components/vue3')
	    }
    ]
})

vue3.vue文件----------------------------------------------------------------------------------------------
<template>
	  <div id="microApp"></div>
</template>

<script setup>
import { loadMicroApp } from 'qiankun';
import { onMounted } from 'vue';
onMounted (()=>{
	microApp ();
})

const microApp = loadMicroApp(
  {
    name: "vue3",
    entry: "https://localhost:8081",
    container: "#microApp"
  }
)
</script>
<style scoped>
</style>
写回答

1回答

yancy

2021-09-09

并非没用哈。对于框架来说,良好的可移植性和良好的兼容性是必备的,当然可以使用主应用的router做拦截,但是如果主应用的技术栈换了呢?是不是还得重新实现一份儿。还有个问题就是,如果这么写了的话。我们开发多份儿主应用的时候,子应用加载的逻辑得写多遍,即使复制粘贴也不能保证所有内容都是一样的,况且还有技术栈的阻隔。

0
0

从0打造微前端框架,实战汽车资讯平台

专为2~5年前端工程师打造的架构能力提升课

781 学习 · 204 问题

查看课程