VUE-如何解决繁琐的import导入组件

vue 中一个组件需要使用另外一个组件的时候，需要先Import，这个过程既重复又啰嗦，比如框架的一些组件，所有页面都可能会用到，那我们为什么不将他们统一挂载到vue中呢。

统一挂载框架组件

首先在框架文件夹同级建立一个Index.js文件

// 导入Vue, 需要使用Vue.component()方法注册组件
import Vue from 'vue'

const requireComponents = require.context('./', true, /\.vue/);
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
    // 组件实例
    const reqCom = requireComponents(fileName)
    if (reqCom.default) {
        let name = reqCom.default.name
        if (!name) {
            name = fileName.substr(fileName.lastIndexOf("/") + 1).replace(".vue", "")
        }
        // 组件挂载
        Vue.component(name, reqCom.default)
    }
})

然后在main.js中将当前这个Index.js import 进去

// 引入通用组件
import './components/index.js'

既然上面可以统一将框架的组件挂载到vue实例上，那么我们还有必要在router中手动定义route信息吗。
注意:通过下面方式导入的route是有规则的，它的path就是文件相对路径+文件名，如果规则不一样需要修改其中代码

// 加载views 下面的文件以.vue结尾的
const requireComponents = require.context('./../views/', true, /\.vue/);
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
    // 组件实例
    const reqCom = requireComponents(fileName)
    if(reqCom.default){
        let name = reqCom.default.name
        if(!name){
            name = fileName.substr(fileName.lastIndexOf("/")+1).replace(".vue","")
        }
        // 构建routes信息
        routes.push({
            path: fileName.substr(1).replace(".vue",""),// 如果对于path命名的规则不一样，那么需要通过逻辑动态构建此处的path
            name: name,
            // 组件挂载
            component: Vue.component(name, reqCom.default)
        })
    }
})

定义一个router跳转工具类

通常我们跳转页面需要使用 this.$router.push({path:‘路径’,name:'路由名字‘,params:{参数}})，这样的代码导致一个问题，当页面的path发生改变，我们需要逐个修改，不能达到统一管理的目的。所以我们封装一个routerHelper的工具对象

// 将router 对象转换成为map 导出 以便外面根据名字跳转
let routerMap = {}
routes.forEach(route => {
    routerMap[route.name] = route
})

// 向外暴露一个router帮助对象
export const routerHelper = {
    /**
     * 寻找路由信息，返回浅拷贝对象
     * @param routerName
     * @returns {MediaStream | Response | MediaStreamTrack | Request | *}
     */
    findRouter(routerName) {
        let sourceRoute = routerMap[routerName]
        return {
            path:sourceRoute.path,
            name:sourceRoute.name
        }
    },
    /**
     * 通过路由名称和params跳转界面
     * @param routerName
     * @param params
     */
    goToWithParam(routerName, params) {
        let route = this.findRouter(routerName)
        route.params = params
        router.push(route)
    }
}

跳转界面的时候只需要关系router的名字即可

this.$routerHelper.goToWithParam('路由名称',参数对象)