首页 > 其他分享 >vue3 vite 根据目录生成路由

vue3 vite 根据目录生成路由

时间:2023-10-26 10:59:38浏览次数:33  
标签:src views index replace vite vue3 routes path 路由

vite 勾选 vue-router 搭建好项目后,routes部分示例代码为

routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]

  页面文件在views文件夹,一般用文件夹包含index.vue文件

 关键是用vite读取文件模块的方法

import.meta.glob('/src/views/**/*.vue', { eager: true })

转成示例要的那种格式

Object.keys(views).forEach((path) => {
  routes.push({
    path: path.replace(/^\/src\/views(\/\w+)?\/index\.\w+$/, '$1') ? path.replace(/^\/src\/views(\/\w+)?\/index\.\w+$/, '$1') : '/',
    name: path.replace(/^\/src\/views(\/\w+)?\/index\.\w+$/, '$1').replace('/', ''),
    component: views[path].default,
  });
});

完整代码

import { createRouter, createWebHistory } from 'vue-router'


const routes: any = [];

const views: any = import.meta.glob('/src/views/**/*.vue', { eager: true })

Object.keys(views).forEach((path) => {
  routes.push({
    path: path.replace(/^\/src\/views(\/\w+)?\/index\.\w+$/, '$1') ? path.replace(/^\/src\/views(\/\w+)?\/index\.\w+$/, '$1') : '/',
    name: path.replace(/^\/src\/views(\/\w+)?\/index\.\w+$/, '$1').replace('/', ''),
    component: views[path].default,
  });
});

console.log(routes)


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

 

标签:src,views,index,replace,vite,vue3,routes,path,路由
From: https://www.cnblogs.com/yxc5354/p/17788888.html

相关文章

  • 使用vite自动生成vue路由
    全新的路由组织方式以往编写路由都需要手动编写router.js代码,其实很多代码是重复的新的方案根据文件夹目录结构自动生成文件夹下的index.vue->/初始化项目构建npminitvue@latest运行npmrundev项目结构一个文件夹对应一个路由page.js用来填写配置信息exportdefault{ti......
  • vite中使用scss导出变量到js/ts中作为变量使用
    定义scss定义一个scss文件,注意,这里的文件名要以module.scss结尾,不然会出现读写错误的问题。$background-color_hover:#e4e8ec;$background-color_chosed:#f44343;:export{bgc_hover:$background-color_hover;bgc_chosed:$background-color_chosed;}.modu......
  • centos7.9设置永久明细路由
    centos7.9设置永久明细路由1.创建配置文件/etc/sysconfig/static-routesstatic-routes默认没有此文件,需要手动创建2.编辑配置文件static-routes,添加以下内容:anynet10.86.134.0/24gw202.96.104.1#上面意思为10.86.134.0/24的网络数据都从202.96.104.1访问。也就是202.96.104.1......
  • TCP和HTTP协议的路由跟踪
    方式1:yuminstall-ytraceroutetraceroute-T或者tcptraceroute,tcptraceroute是 traceroute-T的别名-T                    #使用TCPSYN包进行探测,等同于tcptraceroute,默认端口是80-4                    #强制使用ipv4地址-......
  • vue3 watch 用法
    <scriptsetup>import{ref,computed,watch}from'vue'constnum=ref(1)constname=ref('ming')constobj=ref({name:'小明',age:30})//watch简单类型//watch(num,(newValue,oldVal......
  • vue3 elementplus table表格内添加checkbox和行号
    1.仅添加复选框<el-table-columntype="selection"width="55"></el-table-column>2.添加复选框和文字行号在一列<el-table-column><template#header><el-checkboxv-model="selectAll"@change="han......
  • vue3 动态加载组件
    <el-dropdownstyle="margin:0px"><el-buttontype="primary">视图</el-button><template#dropdown><el-dropdown-menu><el-dropdown-itemv-for="dropItemindropI......
  • 关于Vite辨别当前环境
    Vite是一个现代化的前端构建工具,它提供了内置的环境变量来辨别当前环境是生产环境还是开发环境。在Vite中,可以通过检查import.meta.env对象来获取当前环境的信息。import.meta.env对象包含了一些常用的环境变量,其中最重要的是MODE变量。MODE变量表示当前的构建模式,可以......
  • FastAPI学习-10. 路由管理APIRouter
    前言在Flask中,我们一般用蓝图Blueprint来处理多个模块的视图,在fastapi中也有类似的功能通过APIRouter来管理。路由管理APIRouter如果你正在开发一个应用程序或WebAPI,很少会将所有的内容都放在一个文件中。FastAPI提供了一个方便的工具,可以在保持所有灵活性的同时构建你......
  • 记录--vue3实现excel文件预览和打印
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在前端开发中,有时候一些业务场景中,我们有需求要去实现excel的预览和打印功能,本文在vue3中如何实现Excel文件的预览和打印。预览excel关于实现excel文档在线预览的做法,一种方式是通过讲文档里的数据处理成......