vue自动路由生成

标题vue-cli自动路由生成

在写vue的项目中，一般情况下我们每添加一个新页面都得添加一个新路由。为此我们在项目中会专门的一个文件夹（router）来管理路由,在一个大型项目中，会根据需要配置对应的路由规则，而对应的路由规则对应一个vue文件路径，所以我们的文件夹和路由是完全能够对应上的，只要知道路由，就能很快的找到对应的文件。那么有没有办法能够读取我们二级目录下的所有文件，然后根据文件名来生成路由呢？答案是有的

原理require.context

webpack就提供了一个context方法来获取到目录下的所有文件。

• 官方文档require.context

简单说就是：有了require.context，我们可以得到指定文件夹下的所有文件

语法：
require.context(directory, useSubdirectories = true, regExp = /^\.\/.*$/, mode = 'sync');

示例1：
require.context('./test', false, /\.test\.js$/);
//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。

示例2：
require.context('../', true, /\.stories\.js$/);
//（创建出）一个 context，其中所有文件都来自父文件夹及其所有子级文件夹，request 以 `.stories.js` 结尾。

require.context有三个参数：

• directory：说明需要检索的目录
• useSubdirectories：是否检索子目录
• regExp: 匹配文件的正则表达式

require.context()的返回值，有一个keys方法，返回的是个数组：

const files = require.context('./components/', false, /\.vue$/);
let paths = files.keys();

通过上面的代码，我们打印出了所有的views文件夹下的所有文件和文件夹，我们只要写好正则就能找到我们所需要的文件 。

实际使用

1、首先在需要自动生成路由的目录下新建page.js

// 1、首先获取当前目录下所有的文件；
///2、然后筛选出所有的vue文件;
const files = require.context('./', false, /\.vue$/);

const pages = {};

files.keys().forEach((key) => {
  ///3、通过正则将文件名作为属性名来保存文件
  pages[key.replace(/(\.\/|\.vue)/g, '')] = files(key).default;
});

export default pages;

2、然后再route目录中新建routers.js文件来生成实际可用的路由数组

import pages from '@/components/pages.js'; // 页面文件目录

let routes = [];

// 通过内置对象Object的keys方法来生成vue可用的路由数组
Object.keys(pages).forEach((item) => {
  routes.push({
    path: `/${pages[item].name}`,

    name: pages[item].name,

    component: pages[item],
  });
});

export default routes;

3、将生成的路由数组引入vue路由配置中

// 1、引入路由数组
import routerList from './routers';

const routes = [
  ...routerList, // 将路由数组合并到vue路由配置中
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: () =>
      import('../views/About.vue'),
  },
];

最终生成路由如下：

这样一个简单的路由自动生成的功能就实现了~
注意：
1、要路由的页面一定要设置name属性；
2、消除严格模式，在项目根目录下新建.eslintignore文件，加一个“src/*”即可

可以拓展问题：
1、需要路由的页面并不在同一个目录下，如何获取文件；
2、并不是所有vue文件都是路由页面，如何筛选；
3、自动生成路由如何设置参数；