前言
小伙伴们大家好。上篇文章我们分享了如何使用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,
});
微应用配置
微应用的配置有两种方案：
- 一种是所有的路由都是采用平铺式（即所有路由都在同一层级），但这种配置方式需要在每个路由前都要加上前缀 “/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模式的改造，小伙伴们可根据个人喜好自行选择。
好了本次分享就到这里了，喜欢的小伙伴欢迎点赞关注加评论哦！