如何在vue3中实现自动注入路由

什么是Automatic Routes

我知道这个概念是来自NuxtJs的一个特性：Automatic Routes（自动注入路由）。

平时使用带有vue-router 的Vue 应用程序时，您必须设置一个配置文件（即 router.js）并手动将所有路由添加到其中。而Nuxt 会根据您提供的 pages 目录中的 Vue 文件为您自动生成 vue-router 配置。这意味着您永远不必再次编写路由器配置！ Nuxt 还为您的所有路由提供自动代码拆分。

Automatic Routes的好处

• 快速开发：通过创建文件夹，自动生成routes。同时，不需要再考虑路由方面的bug了。

Automatic Routes的例子

您的项目目录如下：

src
├── views
│   ├── index.vue
│   ├── about.vue
│   └── user
│       ├── about.vue
│       └── index.vue

对应自动生成的routes：

[{
  component: () => import('@/views/index.vue'),
  path: '/'
},
{
  component: () => import('@/views/about.vue'),
  path: '/about'
},
{
  component: () => import('@/views/user/index.vue'),
  path: '/user/'
},
{
  component: () => import('@/views/user/about.vue'),
  path: '/user/about'
}]

实现

实现环境

vue3、vue-cli、vue-router

实现思路

• 需要一个能读取文件路径的javascript api。虽然我们无法使用nodejs的file api,但是webpack的require.context ()可以满足该需求。
• 使用 import（）懒加载路由。
• 循环中获取并修改文件路径，添加route

实现代码

找到router的配置文件，如/src/router/index.js。修改如下：

import { createRouter, createWebHashHistory } from 'vue-router';

// 自动注入路由
const modules = require.context('../views', true, /.vue/);
const autoRoutes = modules.keys().map((item) => {
  const viewName = item.slice(2);
  const path = item.slice(1).replace('.vue', '').replace('index', '');
  const viewModule = () => import(`../views/${viewName}`);
  return {
    path,
    component: viewModule,
  };
});
const routes = autoRoutes;

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

如此即能实现上例的效果

更多

此代码只是简单地演示实现。你可以根据自己的需求，添加更多的内容。