前言

小伙伴们大家好。上篇文章我们分享了如何使用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.jsconst router = new VueRouter({mode: 'hash',//修改后的代码，history改为hashroutes,
});

微应用配置

微应用的配置有两种方案：

• 一种是所有的路由都是采用平铺式（即所有路由都在同一层级），但这种配置方式需要在每个路由前都要加上前缀 “/vueChild”，包括所有的route-link标签的to属性也都需要添加此前缀
• 另一种方案就是额外新建一个空白的路由页面，将其它所有的路由都作为它的子路由（放在children属性中），这种方式放在children中的子路由不需要在每个路由中都加前缀 /vueChild，但是也不能加 “/”，否则就跳转到了跟目录下，也容易与主应用路由冲突

两种方式都可以实现hash模式的微前端应用，小伙伴们可以根据个人喜好自行选择。下面给出两种方式修改后的代码：

• 方案一：平铺式路由，但需要加前缀 “/vueChild”

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter);
const routes = [{path:'/vue/home',name: 'Home',component:()=>import('../views/Home.vue')},{path:'/vue/about',name: 'About',component:()=>import('../views/About.vue')}
]const router = new VueRouter({mode: 'hash',routes
})export default router

<!-- App.vue -->
<template><div id="app"><div id="nav"><router-link to="/vue/home">Home</router-link> |<router-link to="/vue/about">About</router-link> |</div><router-view /></div>
</template>

• 方案二：新增空白路由页面Container.vue，将其它所有路由都放在children中

<!--Container.vue-->
<template><div id="container"><!--内容可空，也可根据业务逻辑自行添加其它内容--><router-view /></div>
</template>

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Container from '../views/Container.vue'Vue.use(VueRouter);
const routes = [//如果访问的是/vue，则自动重定向到home主页（/vue/home）{path:'/vue',redirect:'/vue/home' //重定向到主页},{path:"/vue",//空白路由页面name: "Container",component: Container,children:[ //其它所有路由放在children中{path:'home',//注意这里不要加任何前缀name: 'Home',component:()=>import('../views/Home.vue')},{path:'about',//注意这里不要加任何前缀name: 'About',component:()=>import('../views/About.vue')}]}
]const router = new VueRouter({mode: 'hash',routes
})export default router

<!-- App.vue -->
<template><div id="app"><div id="nav"><router-link to="home">Home</router-link> | <!--注意这里不要加任何前缀--><router-link to="about">About</router-link> | <!--注意这里不要加任何前缀--></div><router-view /></div>
</template>

总结

按照上面的配置就可以实现一个hash模式的qiankun微前端了，感兴趣的小伙伴快去试试吧。

本文为大家整理了如何用hash模式实现一个微前端应用，通过分享我们知道无论是主应用还是子应用，要实现一个hash模式，主要的改动还是路由这一块，其它的改动并不算多。另外本文还从两个方面实现了微应用实现hash模式的改造，小伙伴们可根据个人喜好自行选择。

好了本次分享就到这里了，喜欢的小伙伴欢迎点赞关注加评论哦！