前言
小伙伴们大家好。上篇文章我们分享了如何使用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模式的改造,小伙伴们可根据个人喜好自行选择。
好了本次分享就到这里了,喜欢的小伙伴欢迎点赞关注加评论哦!