如何在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'
}]

实现

实现环境