10-13 01:28 阅读 71

如何在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; 复制代码

如此即能实现上例的效果

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

作者：沙克徐
链接：https://juejin.cn/post/7018187229478518815