vue动态菜单和路由(vue路由动态添加参数)

[db:作者]

首先，理解路由加载组件的两种方式。
一旦同步加载，这个编写vite2会把组件直接打包到首页，特点是使用简单但不够灵活。
从“@ MSN/Main/index . vue”{ path:'/'，component: Main，name: 'main'}2导入Main。
第二，异步加载。这种编写vite的方式将组件单独打包，只在实际使用的地方加载它们。其特点是主包尺寸减小，足够灵活。但是，由于编写组件路径的要求，很难调试和理解。
{path: '/'，component:()=  gt；import ('@ MSN/main/index.vue ')，name:' main ' }//或
对于动态路由，必须使用第二种方法，因为路由路径和组件路径是通过后台菜单动态生成的。
//假设菜单信息如下{id: '1 '，名称: '用户信息'，url: '/core/user'}//假设用户组件的文件路径为:/src/views/core/user/index.vue
第一个问题是，url被用作路由的路径。异步组件的路径如何对应url？//很多开发者可以很轻松的把路由信息写成这样 {path:' core/user '，component:()= >；导入(`/src/views/${url}/index.vue`)}
这样你会发现根本不行，说明组件加载不了。为了让vite在编译期间静态分析异步路径，必须按如下方式使用相对路径:
//路径应该是相对于当前写入路由信息的文件的相对路径//假设这个路由信息所在的文件是:/src/router/index . js{ path:' core/user '，component:()= >；导入(` 0../views/${url}/index.vue`)}
你的代码在这里打出来调试的时候，我很开心的发现可以用了。我松了一口气，以为终于搞定了。
第二个问题是，按照第一种写法，vite如何找到对应的组件并单独打包？如果views目录下有views/a/b/c、views/a/b、views/d/e等多级目录，显然vite2不知道去哪里找组件？原来打包时没有生成对应组件的包，发布后提示无法加载组件？唉，我的心又沉了下去，然后我疯狂地寻找资料，终于找到了。
https://github . com/roll up/plugins/tree/master/packages/dynamic-import-vars #限制
将代码更改为:
//拆分URLlet URL path = URL . Split('/')；//静态显示目录级别 {path:' core/user '，component:()= >；导入(` 0../views/$ { URL path[0]}/$ { URL path[1]}/index . vue `)}
按照上面的写法，发现vite最后已经把所有的vue组件都打包在这个动态目录里了，也发现发布之后就ok了。
总结:对于有代码洁癖的开发人员来说，我总觉得这种写法限制太多。如果组件只在一级目录下呢？如果有更好的解决方案，欢迎评论，与同行交流。