vue中router的封装+返回键导航模板设置

h5 开发项目中，由于每个页面都有导航组件，即使每个页面都去引用导航组件也会造成代码量大， 不好维护， 代码冗余等问题， 所以就想到直接封装到路由里面， 在路由里面直接设置是否显示导航、改变导航颜色， 改变返回键主题色、及按需修改导航文本

说一下思路

1. 建立导航返回组件
2. 在路由routerList 中就直接设置是否显示导航组件、修改主题色、修改文字、是否显示返回键的需求
3. 通过中间路由根据变量直接引入页面 ，在路由中间键中的beforeEachHandle 方法中根据store 去加载导航显示状态及控制是否显示返回键和文本标题
4. 在App.vue 中将导航组件引入进去， 页面需要修改导航的文本可以根据store 去设置

一、 首先看router目录

二、进入正题， 直接上代码

1、将文件都建立好（页面的引入方式是根据环境变量的方式引入）
（1）src 下建立一个页面， 页面中随便写入几个文字方便测试

(2) routerList 文件下将页面引入进来
注意： 该文件下就直接使用路由中间键将相关代码联系起来
1、 router 文件夹下分别建立import_development、 import_production 文件， 由于是采用的按需加载所以使用了这两个文件（开发环境不需要按需加载， 生成环境需要）
（1）import_development.js 代码

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

（2）import_production.js 代码

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

2、 routerList 文件中将页面引用进来

const {
    importFile } = require(