阅读 182

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

如此即能实现上例的效果

更多

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

文章分类
前端
文章标签