自动加载路由作为模块
Autoload routes as modules
我已经设法为 vuex 存储文件创建了一个自动加载器,但我无法让它为 vue-router 文件工作。
我总是得到错误 [vue-router] "path" is required in a route configuration.
index.js 自动加载文件
import camelCase from 'lodash/camelCase';
const requireRoute = require.context('.', false, /\.js$/); // extract js files inside modules folder
const routes = {};
requireRoute.keys().forEach((fileName) => {
if (fileName === './index.js') return; // reject the index.js file
const routeName = camelCase(fileName.replace(/(\.\/|\.js)/g, '')); //
routes[routeName] = requireRoute(fileName).default;
});
export default routes;
router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import routes from '@/routes/modules';
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
icon: 'fa-tachometer',
title: 'Dashboard',
inMenu: true,
},
},
routes,
],
});
谁能指出我正确的方向?
尝试spread你的routes
对象,这样你的主要routes
将不包含单个对象,而是一堆对象:
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
icon: 'fa-tachometer',
title: 'Dashboard',
inMenu: true,
},
},
...routes,
],
我必须设置 const routes = [];
并且必须 .push()
它到数组。
所以下面的代码有效:
index.js
const requireRoute = require.context('.', false, /\.js$/); // extract js files inside modules folder
const routes = [];
requireRoute.keys().forEach((fileName) => {
if (fileName === './index.js') return; // reject the index.js file
routes.push(requireRoute(fileName).default);
});
export default routes;
router.js
import Vue from 'vue';
import Router from 'vue-router';
import routes from '@/routes/modules';
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
我已经设法为 vuex 存储文件创建了一个自动加载器,但我无法让它为 vue-router 文件工作。
我总是得到错误 [vue-router] "path" is required in a route configuration.
index.js 自动加载文件
import camelCase from 'lodash/camelCase';
const requireRoute = require.context('.', false, /\.js$/); // extract js files inside modules folder
const routes = {};
requireRoute.keys().forEach((fileName) => {
if (fileName === './index.js') return; // reject the index.js file
const routeName = camelCase(fileName.replace(/(\.\/|\.js)/g, '')); //
routes[routeName] = requireRoute(fileName).default;
});
export default routes;
router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import routes from '@/routes/modules';
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
icon: 'fa-tachometer',
title: 'Dashboard',
inMenu: true,
},
},
routes,
],
});
谁能指出我正确的方向?
尝试spread你的routes
对象,这样你的主要routes
将不包含单个对象,而是一堆对象:
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
icon: 'fa-tachometer',
title: 'Dashboard',
inMenu: true,
},
},
...routes,
],
我必须设置 const routes = [];
并且必须 .push()
它到数组。
所以下面的代码有效:
index.js
const requireRoute = require.context('.', false, /\.js$/); // extract js files inside modules folder
const routes = [];
requireRoute.keys().forEach((fileName) => {
if (fileName === './index.js') return; // reject the index.js file
routes.push(requireRoute(fileName).default);
});
export default routes;
router.js
import Vue from 'vue';
import Router from 'vue-router';
import routes from '@/routes/modules';
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes,
});