头图

【代码分享】vue路由如何自动加载?

十安
每次vue项目新增页面都要重新配置路由,页面多了之后就会导致router文件特别长,当然我们也可以把路由按模块来分开配置,但是始终是需要我们手动去配置,那么有没有一种方法可以减少路由的配置呢?

require.context() 为我们提供了解决方案
require.context()有三个参数,分别是:

  1. directory:表示检索的目录
  2. useSubdirectories:表示是否检索子文件夹
  3. regExp:匹配文件的正则表达式,一般是文件名

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

let routes = []

// 自动读取views文件夹下的所有vue文件
const files = require.context('../views', true, /\.vue$/)
files.keys().map((item) => {
  let path = item.slice(1).replace(".vue", "").toLowerCase();
  // 获取组件信息
  const comp = files(item).default
  console.log(comp);
  routes.push({
    path,
    name: comp.name,
    component: () => import(`../views${item.slice(1)}`),
  });
});

// 匹配 / 路由
routes.unshift(
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/home/Home.vue'),
  }
)
// 当匹配不到路由时,匹配一个404页面
routes.push(
  {
    path: '*',
    name: 'Error',
    component: () => import('../views/error/index.vue'),
  }
)
console.log(routes);

const router = new VueRouter({
  mode: "history",
  routes
})

export default router
阅读 219
20 声望
0 粉丝
0 条评论
20 声望
0 粉丝
文章目录
宣传栏