This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

preface

Hello, everyone. In the previous article, we shared how to implement a simple microfront-end application using Qiankun + Vue2.0. At the end of the article, it is also mentioned that in the micro-front-end application, the routing mode used is based on the history mode for routing configuration. If the current configuration is changed to hash mode, various problems will occur, such as page cannot be found or resource loading disorder, etc. What if you want to use hash mode? Let’s look at how to configure a hash mode micro front-end application!

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

Active Application Configuration

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

  • In main.js, there is only one thing zhi needs to change, and that is the activeRule property when registering microapplications. As you know, in history mode, we directly configure activeRule with a string “/vue”. If the main application is in history mode, or if the main application is deployed in a non-root directory, this will not work. Hence the standard configuration: encapsulate a method called getActiveRule and handle it with location.hash.startswith ().
  • For router/index.js, you need to change the mode attribute of the route from history to hash mode. Since base in hash mode is invalid, you do not need to perform special configuration

The modified code for the two files is as follows:

// main.js
/ /...
// Encapsulate 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
}]
/ /...
Copy the code
// router/index.js

const router = new VueRouter({
	mode: 'hash'.// Change history to hash
	routes,
});
Copy the code

Microapplication configuration

There are two scenarios for microapplication configuration:

  • One is that all routes are tiled (that is, all routes are at the same level). In this configuration, prefix /vueChild must be added to each route, including to attributes of all Route-link labels
  • Another option is to create an extra blank routing page and make all the other routes its child routes (in the children attribute). In this way, the child routes in children do not need to prefix each route with /vueChild, but also cannot add “/”, otherwise they will jump to the following directory. It is also prone to conflict with the main application route

Both methods can realize hash mode micro-front-end applications, and friends can choose according to their personal preferences. Here is the modified code in two ways:

  • Scheme 1: Tiled route with prefix “/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
Copy the code
<! -- 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>
Copy the code
  • Solution 2: Add a blank routing page container. vue and add all other routes to children
<! --Container.vue-->
<template>
	<div id="container">
		<! Content can be empty, or you can add other content according to the business logic -->
		<router-view />
	</div>
</template>
Copy the code
// 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 accessing /vue, you are automatically redirected to the home page (/vue/home).
	{
		path:'/vue'.redirect:'/vue/home' // Redirect to the home page
	},
	{
		path:"/vue".// A blank routing page
		name: "Container".component: Container,
		children: [// All other routes are placed in children
			{
				path:'home'.// Be careful not to add any prefixes
				name: 'Home'.component:() = >import('.. /views/Home.vue')}, {path:'about'.// Be careful not to add any prefixes
				name: 'About'.component:() = >import('.. /views/About.vue'}]}]const router = new VueRouter({
	mode: 'hash',
	routes
})

export default router
Copy the code
<! -- App.vue -->
<template>
	<div id="app">
		<div id="nav">
			<router-link to="home">Home</router-link> | <! -- Make sure you don't add any prefixes -->
			<router-link to="about">About</router-link> | <! -- Make sure you don't add any prefixes -->
		</div>
		<router-view />
	</div>
</template>
Copy the code

conclusion

According to the above configuration can achieve a hash mode qiankun micro front end, interested partners quickly go to try.

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

Well this time to share here, like small partners welcome to like attention and comment oh!