In the h5 development project, because each page has navigation components, even if each page references the navigation components, it will cause problems such as large amount of code, poor maintenance and code redundancy. Therefore, it is thought to directly package it into the route, and directly set whether to display the navigation, change the navigation color, change the theme color of the return key and modify the navigation text as needed

Let's talk about ideas

1. Create navigation return component
2. In the routing routerList, you can directly set whether to display the navigation component, modify the theme color, modify the text, and display the return key
3. Through the intermediate route, the page is directly introduced according to the variables. In the beforeachhandle method in the intermediate key of the route, the navigation display status is loaded according to the store and whether the return key and text title are displayed are controlled
4. On app The navigation component is introduced into Vue, and the navigation text that needs to be modified on the page can be set according to the store

1, First look at the router directory

2, Get to the point and go straight to the code

1. Establish all the files (the page is imported according to the environment variable)
(1) Create a page under src, and write a few words in the page to facilitate the test

(2) Bring in the page under the routerlist file
Note: under this file, the routing intermediate key is directly used to connect the relevant codes
1. Create import under router folder_ development, import_production files are used because they are loaded on demand (the development environment does not need to load on demand, but the generation environment does)
(1)import_development.js code

module.exports.importFile = filePath => require(`views/${filePath}.vue`).default

(2)import_production.js code

module.exports.importFile = filePath => () => import(/* webpackChunkName: "[request]" */ `views/${filePath}.vue`)

2. The page is referenced in the routerList file

const { importFile } = require(`./import_${process.env.NODE_ENV}`)   // The difference is import_development or import_production
/**
 * @param path route
 * @param name Route name
 * @param meta Routing element (title, whether to display return key, whether to display header navigation, theme color (class, the style can be modified according to this class later))
 * @param redirect Route redirection
 * @param component Page components (if you use importFile to import, you can decide whether to load on demand or not according to the packaging environment. If the page does not need to be loaded on demand, you can directly () = > Import ('xx '), such as the disconnected page)
 * @param props props of routing reference page
 */
export default[
  {
    path: '/',  
    name: 'index',
    meta: {
      title: '',
      showBackIcon: false,
      showHeader: false,
      theme: 'white'
    },
    component: importFile('home/index'),
   },
]

3. The store says whether to display the navigation header information, whether to display the return button and other related settings. Due to the different needs of the company and the different writing methods of each development, there is no much explanation. Take whether to display the return button as an example

import Vue from 'vue'
const CHANGE_OPERATE_ICON = 'CHANGE_OPERATE_ICON' // Change the display and hiding of the operation buttons on the right side of the container header
export default {
state: {
  showBackIcon: false, // Show return button
},
getters: {
 showBackIcon: state => state.showBackIcon,
},
mutations: {
    [CHANGE_BACK_ICON_DISPLAY] (state, isShow) {
      state.showBackIcon = isShow
    },
},
actions: {
    // Show hide return button
    showBackIcon ({ commit }, isShow) {
      commit(CHANGE_BACK_ICON_DISPLAY, isShow)
    },
}
}

4. The middleware page under the router file will be loaded as soon as the page enters. Whether to display the return key

import store from 'store'
export async function beforeEachHandle(to, from, next){
  store.dispatch('common/showBackIcon', to.meta.showBackIcon || to.meta.showBackIcon === undefined)
}

5. In the index file under the router folder, intermediate routes can be used

import Vue from 'vue'
import Router from 'vue-router'
import routes from './routerList'
import { beforeEachHandle, afterEachHandle } from './middleware'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes
})
// Before entering the route, some special operations need to be done, such as hiding the head, etc
router.beforeEach(beforeEachHandle)

router.afterEach(afterEachHandle)

export default router

6. On app Just use it in Vue

<template>
  <div
    id="app" >
    <header-bar/>
    <div class="main">
      <keep-alive include="">
        <router-view/>
      </keep-alive>
    </div>
  </div>
</template>
<script>
	import HeaderBar from 'components/custom/headerBar'
	import { mapGetters, mapActions } from 'vuex'
	export default {
  		name: 'App',
  		data () {
    		return {
      			dpr: window.devicePixelRatio,
      			headerHeight: parseFloat((88 * document.documentElement.clientWidth) / 750)
    	}
  	},

 	components: {
   	 	HeaderBar
  		},
  	methods: {
    	...mapActions('common', [
    	])
  	},
}
</script>

Finally, the page effect can be achieved by compiling