二次封装vue路由

最新推荐文章于 2024-06-13 14:06:55 发布

代码写完就忘

最新推荐文章于 2024-06-13 14:06:55 发布

阅读量361

点赞数

本文链接：https://blog.csdn.net/weixin_44582450/article/details/106292101

版权

本文介绍了如何二次封装Vue路由，包括自动处理path、name和component的规则，如删除以index结尾的部分，以及如何生成子路由。通过提供的getRouters函数和createRoute递归方法，可以自动生成详细的路由配置。

摘要由CSDN通过智能技术生成

/*
*rules:
*一。列如：index/index，shop/index以index结尾的，path和name默认去除index
*一。列如：shop/iist，默认生成name为shop_list(如果结尾为index，则去除index，生成shop)
三。如果填写后不会生成，
/
const routes = [
{
path: “/”,
name: “layout”,
redirect: {name:‘index’},
// component:()=>import(’@/views/Layout’),
component:‘Layout’,
children: [
{
// path: ‘/index’, name: ‘index’, component:()=>import(’@/views/index/index’),
component:‘index/index’
},
{
component:‘shop/goods/list’
}
]
},
{
// path: “/login”,name: “login”, component: ()=>import(’@/views/login/index’)
component:‘login/index’
},
{
path: "",redirect: {name:‘index’}
},
];