如何在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; 

如此即能实现上例的效果

更多

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