preface

Hello, guys. In the last article, we shared how to use qiankun+vue2.0 to implement a simple micro front-end application. At the end of the article, it is also mentioned that in the implemented micro front-end applications, the routing modes used are configured based on the history mode. If the current configuration is changed to hash mode, various problems will occur, such as page missing or resource loading disorder. What if you want to use hash mode? Next, let's see how to configure a micro front-end application in hash mode!

This article will modify the configuration based on the micro front-end application implemented in the previous article, so only the operation steps of the configuration and the code to be modified will be sorted out here. The complete code will not be shown here.

Main application configuration

To implement a micro front-end application in hash mode, the main application needs to be modified. There are mainly two files to be modified: main.js and router/index.js.

• Main.js is modified. There is only one thing in main.js that needs to be modified, that is, the activeRule attribute when registering micro applications. As everyone who read the previous article knows, in the history mode, we directly configured the activeRule with a string "/ vue", but in the hash mode, because there are more "#" in the path, we can directly change "/ vue" to "# / vue", However, there is a problem with this writing: if the main application is in the history mode or the main application is deployed in a non root directory, this writing will not take effect. Therefore, the official also gives a standard configuration scheme: encapsulate a method getActiveRule, and then use location.hash.startsWith() to process it.
• For router/index.js, first change the mode attribute of the route from history to hash mode. Because the base in hash mode does not work, there is no need to make special configuration
  The modified codes of the two files are as follows:

// main.js
// .....
//Encapsulates a getActiveRule method
const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
const apps = [
{
	name:'qiankun-child', 
	entry:'//localhost:8082',
	container:'#vueContainer',
	activeRule: getActiveRule('#/vueChild '), / / modified code: call getActiveRule to process the route
}]
// .....

// router/index.js

const router = new VueRouter({
	mode: 'hash',//The modified code changes history to hash
	routes,
});

Micro application configuration

There are two configurations for micro applications:

• One is that all routes are tiled (that is, all routes are at the same level), but this configuration method needs to add the prefix "/ vueChild" before each route, including the to attribute of all route link tags
• Another solution is to create an additional blank routing page and take all other routes as its sub routes (in the children attribute). In this way, the sub routes placed in children do not need to be prefixed with / vueChild in each route, but "/" cannot be added, otherwise it will jump to the following directory and easily conflict with the main application route

Both methods can realize the micro front-end application of hash mode, and small partners can choose by themselves according to their personal preferences. The modified code is given in two ways:

• Scheme 1: tiled routing, but prefixed with "/ 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>

• Scheme 2: add a blank routing page Container.vue and put all other routes in children

<!--Container.vue-->
<template>
	<div id="container">
		<!--The content can be empty, or other content can be added according to the business logic-->
		<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 = [
	//If you are visiting / vue, you are automatically redirected to the home page (/ vue/home)
	{
		path:'/vue',
		redirect:'/vue/home' //Redirect to home page
	},
	{
		path:"/vue",//Blank routing page
		name: "Container",
		component: Container,
		children:[ //All other routes are placed in children
			{
				path:'home',//Be careful not to add any prefix here
				name: 'Home',
				component:()=>import('../views/Home.vue')
			},
			{
				path:'about',//Be careful not to add any prefix here
				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> | <!--Be careful not to add any prefix here-->
			<router-link to="about">About</router-link> | <!--Be careful not to add any prefix here-->
		</div>
		<router-view />
	</div>
</template>

summary

According to the above configuration, you can implement a qiankun micro front end in hash mode. Interested partners, go and have a try.

This article sorted out how to implement a micro front-end application with hash mode. Through sharing, we know that there are not many other changes to implement a hash mode, whether it is the main application or sub application. In addition, this paper also realizes the transformation of micro application hash mode from two aspects. Small partners can choose by themselves according to their personal preferences.

Well, that's all for this sharing. Welcome to like, pay attention and comment!