vue中Router的封装以及使用

在项目中会有多个vue页面，就会引入许多路由，如果配置的路由都放在router文件夹下的index.js中，要写很多个,而且显得代码量太多。
所以我们需要 单独写出来 。

在router文件夹中新建HomeRouter.js 和HomeConfig.js

在HomeConfig.js中

const HomeConfig = {
    home: { //home路由
        path: '/',
        name: 'home',
        component: () => import( '../views/Home.vue')
    },
    about: {  //about路由
        path: '/HomeSon',
        name: 'HomeSon',
        component: () => import( '../views/HomeSon.vue')
    }
};
//抛出模块
export default HomeConfig;

在HomeRouter.js 中

import HomeConfig from "./HomeConfig"; //引入刚刚抛出的模块

const HomeRouter = [
    HomeConfig.home, //直接调用
    HomeConfig.about,
];
//模块暴露
export default HomeRouter;

在index.js中

import Vue from 'vue'
import VueRouter from 'vue-router'；
//引入
import HomeRouter from "./HomeRouter";

Vue.use(VueRouter);
//使用
const routes = [
    ...HomeRouter
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
});

export default router

change() {
                this.$router.push(this.$HomeConfig.about.path)
            }