Vue3+vite路由配置优化(自动化导入)

 更新时间:2023年09月20日 09:57:39   作者:马丁的车夫  
这篇文章主要介绍了Vue3+vite路由配置优化(自动化导入),需要的朋友可以参考下

今天在维护优化公司中台项目时,发现路由的文件配置非常多非常乱,只要只中大型项目,都会进入很多的路由页面,规范一点的公司还会吧路由进行模块化导入,但是依然存在很多文件夹的和手动导入的问题。

于是我想到了我之前使用vuex时进行的模块化自动导入js文件,能不能使用到自动导入.vue文件中去,答案是可以!

只需要 15行代码就优化 300行路由配置并且在也不用去后期手动添加路由配置!解放之鼓啊,废话不多说直接上核心代码。

注意:如果你view下面有组件,那么你需要给组件的文件命名:components/组件.vue,不限制层级你可以在view下任意地方创建components开发你的私有组件

1.核心代码

// 自动路由配置(自动导入views文件下所有的文件内的.vue文件进行注册到路由,除了文件名叫components下的vue文件不会被注册进行路由,默认这是一个组件文件夹)
const routeFiles = import.meta.glob('../views/**/*.vue'); // 获取所有views文件下的.vue文件
const routesList = [] // 储存符合路由页面的对象内容
// 会有一些页面不需要自动注册,需要我们手动添加的就在这里上路径
const notRead = ['../views/index.vue','../views/login.vue','../views/index-data.vue','../views/notFound.vue.vue'];
Object.keys(routeFiles).forEach(key => {
  if (key.indexOf('components') === -1 && notRead.indexOf(key) === -1) {// 排除组件 和 不需要自动注册的路由
    const name = key.match(/\.\/(.+)\.vue$/)[1];
    const component = routeFiles[key];
    routesList.push({
      path: `/${name.toLowerCase()}`,
      component: component.default || component,
      name: name
    });
  }
});

2.完整代码

import { createRouter, createWebHashHistory } from 'vue-router';
import storage from '@/utils/sessionStore.js';
import { defineAsyncComponent, h } from 'vue'
// 自动路由配置(自动导入views文件下所有的文件内的.vue文件进行注册到路由,除了文件名叫components下的vue文件不会被注册进行路由,默认这是一个组件文件夹)
const routeFiles = import.meta.glob('../views/**/*.vue'); // 获取所有views文件下的.vue文件
const routesList = [] // 储存符合路由页面的对象内容
// 会有一些页面不需要自动注册,需要我们手动添加的就在这里上路径
const notRead = ['../views/index.vue','../views/login.vue','../views/index-data.vue','../views/notFound.vue.vue'];
Object.keys(routeFiles).forEach(key => {
  if (key.indexOf('components') === -1 && notRead.indexOf(key) === -1) {// 排除组件 和 不需要自动注册的路由
    const name = key.match(/\.\/(.+)\.vue$/)[1];
    const component = routeFiles[key];
    routesList.push({
      path: `/${name.toLowerCase()}`,
      component: component.default || component,
      name: name
    });
  }
});
const routes = [
  {
    path: '/',
    name: 'login',
    component: () => import('@/views/login.vue')
  },
  {
    path: '/index',
    name: 'index',
    component: () => import('@/views/index.vue'),
    children: [
      {
        path: '/index-data',
        name: 'index-data',
        component: () => import('@/views/index-data.vue'),
      },
      ...routesList // 自动配置在这个路由下(可以根据自己的需求进行调整)
    ]
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/notFound.vue')
  },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes
});
router.beforeEach((to, from, next) => {
    next()
});
export default router

3.路由地址说明

直接通过文件夹路径层级来写访问路由即可 列如:

/views/device/grouping

/views/device/list

/views/device/index/appList

后期直接创建文件夹与vue文件即可 不需要再去维护路由配置文件

到此这篇关于Vue3+vite路由配置优化(自动化导入)的文章就介绍到这了,更多相关Vue3 vite路由配置优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue2.0用户权限控制解决方案的示例

    Vue2.0用户权限控制解决方案的示例

    本篇文章主要介绍了Vue2.0用户权限控制解决方案的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 记一次用vue做的活动页的方法步骤

    记一次用vue做的活动页的方法步骤

    这篇文章主要介绍了记一次用vue做的活动页的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue 2.0双向绑定原理的实现方法

    Vue 2.0双向绑定原理的实现方法

    这篇文章主要为大家详细介绍了Vue 2.0双向绑定原理的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    这篇文章主要介绍了vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue elementui tree 任意级别拖拽功能代码

    vue elementui tree 任意级别拖拽功能代码

    这篇文章主要介绍了vue elementui tree 任意级别拖拽功能代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 如何解决ECharts图表切换后缩成一团的问题

    如何解决ECharts图表切换后缩成一团的问题

    这篇文章主要介绍了如何解决ECharts图表切换后缩成一团的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue数据对象length属性未定义问题

    vue数据对象length属性未定义问题

    这篇文章主要介绍了vue数据对象length属性未定义问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue-cli中安装方法(图文详细步骤)

    vue-cli中安装方法(图文详细步骤)

    这篇文章主要介绍了vue-cli中安装方法(图文详细步骤),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue不能检测到Object/Array更新的情况的解决

    Vue不能检测到Object/Array更新的情况的解决

    本篇文章主要介绍了Vue不能检测到Object/Array更新的情况的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue项目打包后浏览器缓存问题及解决

    vue项目打包后浏览器缓存问题及解决

    这篇文章主要介绍了vue项目打包后浏览器缓存问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03

最新评论