我知道这个概念是来自NuxtJs
的一个特性:Automatic Routes(自动注入路由)。
平时使用带有vue-router
的Vue 应用程序时,您必须设置一个配置文件(即 router.js
)并手动将所有路由添加到其中。而Nuxt
会根据您提供的 pages 目录中的 Vue 文件为您自动生成 vue-router
配置。这意味着您永远不必再次编写路由器配置! Nuxt
还为您的所有路由提供自动代码拆分。
您的项目目录如下:
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
找到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;
如此即能实现上例的效果
此代码只是简单地演示实现。你可以根据自己的需求,添加更多的内容。