【微前端】手把手带你改造一个qiankun+vue2.0的hash模式的微前端应用

前言

小伙伴们大家好。上篇文章我们分享了如何使用qiankun+vue2.0实现一个简单的微前端应用。在文章的最后还提到：在实现的微前端应用中，所用到的路由模式都是以history模式为基础进行路由配置的，如果按照当前的配置一旦改成hash模式，那么就会出现各种问题，页面找不到或者资源加载错乱等等。那如果就是想用hash模式该怎么办呢，接下来我们就一起来看下如何配置一个hash模式的微前端应用！

本文将基于上篇文章实现的微前端应用进行修改配置，所以这里只会整理出配置的操作步骤以及需要修改的代码。完整的代码将不在这里展示。

主应用配置

要实现一个hash模式的微前端应用，主应用需要修改的地方不多，主要有两个文件需要修改：main.js和router/index.js。

• main.js修改，main.js中zhi只有一处是需要修改的，那就是在注册微应用时的activeRule属性，看了上篇文章的小伙伴都知道，在history模式中，我们直接给activeRule配置了一个字符串 “/vue” ，但hash模式由于在路径中多出个 “#”，所以这里可以直接把“/vue”改成 “#/vue”，但是这样写有个问题：如果主应用是history模式或者主应用部署在非根目录下，这样写就不会生效了。因此官方也给出一个标准的配置方案：封装一个方法getActiveRule，然后利用location.hash.startsWith()来进行处理。
• router/index.js，首先需要将路由的mode属性从history改为 hash 模式，由于hash模式下的base是不起作用的，因此可以不用做特别的配置
  两个文件修改后的代码如下：

// main.js
// .....
//封装一个getActiveRule方法
const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
const apps = [
{
   
	name:'qiankun-child', 
	entry:'//localhost:8082',
	container:'#vueContainer',
	activeRule: getActiveRule('#/vueChild'), //修改后的代码：调用getActiveRule对路由进行处理
}]
// .....

// router/index.js

const router = new VueRouter({
   
	mode: 'hash',//修改后的代码，history改为hash
	routes,