VUE开发技巧-高级版

1 多路由模块解耦、保证更方便增加新的路由模块

product.routers.js在这里插入代码片

import Product from '../../views/Product.vue'
const routes = {
    path: 'product',
    name: 'product',
    component: Product
}
export default routes

ad.routers.js

import Ad from '../../views/Ad.vue'
const routes = {
    path: 'ad',
    name: 'ad',
    component: Ad
}
export default routes

index.js

/**
 * 可以使用 require.context() 方法来创建自己的（模块）上下文。
    
这个方法有 3 个参数：
要搜索的文件夹目录
是否还应该搜索它的子目录
以及一个匹配文件的正则表达式。
 */
let routersList = [];
let context = require.context('./routes', true, /\.routers\.js/);
context.keys().forEach(key => { routersList.push(context(key).default) });
Vue.use(VueRouter)
const routes = [{
        path: '/',
        name: 'Parent',
        component: Parent
    },
    {
        path: '/about',
        name: 'About',
        children: routersList,
        component: () =>
            import ( /* webpackChunkName: "about" */ '../views/About.vue')
    }
]
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router