vue自动生成路由,vue 自动路由
这篇文章主要给大家介绍了关于vue3.0路由自动导入的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、前提
我们使用的是要求。上下文方法导入，在轻快地创建的项目内使用会报错找不到要求，所以必须用工具创建项目。或者有大能可以说说轻快地怎么解决这个问题。
二、规则
我们使用的规则是，搜索src/views/路径下的所有目录和子目录，搜索文件名叫做index.vue 的文件，使用上级目录的名字作为组件名，进行注册。结构如下：
和公共组件注册一样，我们只注册索引。某视频剪辑软件组件，其他名称的组件不进行注册。
三、导入
//src/router/index.ts
从" vue路由器"导入{createRouter，createWebHashHistory，createWebHistory，RouteRecordRaw}
从" @/商店"导入商店；
从" @/util/upper "导入大榭；//引入一个方法，将字符串的首字母进行大写，我习惯将路径名首字母大写
//路由自动化注册
const routerList:any=[]
const要求组件=要求。上下文( @/views ，true，/index.vue$/) //找到视图路径下的所有文件
const dynamic _ route=要求组件。keys().过滤器（文件名={
返回真实的
})
//现在文件数组是乱序的，我们首先进行排序，父级路由在前面，如果是子级路由在前面，结果父级理由还没有创建，就会报错
//console.log(dynamic_route，排序前)
dynamic_route.sort(function (a，b):number{
const jieguoa:any=a.split().过滤器((item:string)={
返回"/"==项
})
const jieguob:any=b.split()。过滤器((item:string)={
返回"/"==项
})
如果(杰果阿。长度解果b。长度){ return-1 }
如果(杰果阿。长度解果b。长度){ return 1 }
返回0
})
//console.log(dynamic_route，排序后)
dynamic_route.forEach(文件名={
const path=fileName.replace( . , )
const namelist=fileName.replace( . , ).替换( index.vue ， ).拆分(/)。过滤器((i:any)={
返回我
})
//测试配置
const component config=要求组件(文件名)
//组件可以随意添加任何属性，目前添加一个残书属性，是一个数组，里面存放着需要的动态参数
//控制台。日志(组件配置。默认组件配置2)
//每一层都需要手动指定，只做三层吧
if(namelist.length==1){
routerList.push({
路径：/名称列表[名称列表。长度- 1],
姓名：大榭（姓名列表[姓名列表。长度-1]),
组件：()=导入(` 0./views${path} `)，
孩子：[],
})
}else if(namelist.length==2){
路由器列表。foreach((item:any)={
如果(项。name==Daxie(name list[0]){
//判断组件是否需要参数
const can Shu=组件配置。默认。残书 []
如果（参数表){
对于(设I=0；Ican Shu。长度；i ){
canshu[i]=/: canshu[i]
}
item.children.push({
路径：名称列表[名称列表。length-1]残书。加入(“”)，
姓名：大榭（姓名列表[姓名列表。长度-1]),
组件：()=导入(` 0./views${path} `)，
孩子：[],
})
}否则{
item.children.push({
路径：名称列表[名称列表。长度-1],
姓名：大榭（姓名列表[姓名列表。长度-1]),
组件：()=导入(` 0./views${path} `)，
孩子：[],
})
}
}
})
}else if(namelist.length==3){
路由器列表。foreach((item:any)={
如果(项。name==Daxie(name list[0]){
item.children.forEach((苏园：任何)={
if(yuansu.name==大榭(名单[1]){
//判断是不是需要参数
const can Shu=组件配置。默认。残书 []
如果（参数表){
对于(设I=0；Ican Shu。长度；i ){
canshu[i]=/: canshu[i]
}
yuansu.children.push({
路径：名称列表[名称列表。length-1]残书。加入(“”)，
姓名：大榭（姓名列表[姓名列表。长度-1]),
组件：()=导入(` 0./views${path} `)，
})
}否则{
yuansu.children.push({
路径：名称列表[名称列表。长度- 1],
姓名：大榭（姓名列表[姓名列表。长度-1]),
组件：()=导入(` 0./views${path} `)，
})
}
}
})
}
})
}
})
const routes:ArrayRouteRecordRaw=[
{
路径："/",
姓名：家，
component:()=import( @/views/shou ye/shou ye)。vue’)
},
{
路径："/关于"，
名称："关于",
component:()=import(/* webpackChunkName: about */./观点/关于。vue’)
},
.routerList，
{
路径："/404",
名称： 404 ,
组件：()=导入( @/views/404.vue )
},
{
路径："/:pathMatch(.*),
重定向："/404"
},
]
//注意顺序，根据最新的路由匹配规则，404页面必须在最后，
console.log(路由，查看路由表内容)
const router=createRouter({
history: createWebHistory()，
//history: createWebHashHistory()，
路线
})
导出默认路由器
这样，只需要根据规则创建组件，就会被自动注册到路由里面。免去手动注册的繁琐操作。
总结
到此这篇关于vue3.0路由自动导入的文章就介绍到这了，更多相关vue3.0路由自动导入内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。