vue.js - vue3模版文件路劲问题？

Question

下面两种路由路径，哪种会更好，有经验的大哥给一些建议

第一种：

export default [    {        path: '/',        name: 'home',        component: () => import('../views/HomeView.vue')    },    {        path: '/about',        name: 'about',        component: () => import('../views/AboutView.vue')    },    {        path: '/blog',        name: 'blog',        children: [            {                path: 'list',                name: 'blog_list',                component: () => import('../views/blog/ListView.vue')            },            {                path: 'item',                name: 'blog_item',                component: () => import('../views/blog/ItemView.vue')            },        ]    }]

第二种：

export default [    {        path: '/',        name: 'home',        component: () => import('../views/home/IndexView.vue')    },    {        path: '/about',        name: 'about',        component: () => import('../views/about/IndexView.vue')    },    {        path: '/blog',        name: 'blog',        children: [            {                path: 'list',                name: 'blog_list',                component: () => import('../views/blog/list/IndexView.vue')            },            {                path: 'item',                name: 'blog_item',                component: () => import('../views/blog/item/IndexView.vue')            },        ]    }]

Answer 1

没啥太大区别，都行。

不过blog_item的那个路由，建议path上加上id参数，要考虑用户在详情页手动刷新的情况。

Answer 2

要根据你的项目大小，项目大的话第二种好

Answer 3

第二种方式更好
1.目录层次更加清晰，便于维护
2.更好管理和拓展当前模块下的组件