自动注册路由

自动注册路由

• 传统模式

import Vue from "vue";
import VueRouter from "vue-router";
// 引入组件
import home from "../views/home.vue";
import about from "../views/about.vue";
 
// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);
 
const routes = [
    {
        path:"/",
        component: home
    },
    {
        path: "/about",
        component: about
    }
]
 
var router =  new VueRouter({
    routes
})

export default router;

• 优化快捷后

在路由文件夹下，这里假设是名为router文件夹下，创建一个routeModule.js文件。

目录结构如下：

-src
--router
---index.js
---login.module.js
---routeModule.js

routeModule.js:

const routerList = [];

function importAll(r){
    r.keys().forEach(element => {
        routerList.push(r(element).default);
    });
}

importAll(require.context('./',true,/\.module\.js/));// 这里自定义为.module.js 结尾的文件
export default routerList

然后，我们只需要创建对应的路由文件，如：login.module.js。

export default {
    path:'/login',
    name:'login',
    component:()=>import('../views/login.vue')
}

最后，在路由配置文件index.js中引入routeModule.js文件即可，

import Vue from "vue";
import VueRouter from "vue-router";
import routerList from './routeModule.js'
 
Vue.use(VueRouter);
  
var router =  new VueRouter({
    routerList
})

export default router;

注意，require.context是webpack的一个API，所以，需要基于webpack环境才可以使用。