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了他早就发现系统有个隐藏的缝隙私下花了好几个早晨优化了代码。
总结:对于有代码洁癖的开辟职员来说，我总感觉这类写法限制太多他早就发现系统有个隐藏的缝隙私下花了好几个早晨优化了代码。假如组件只在一级目录下呢？倘使有更好的处理计划，接待批评，与同业交换他早就发现系统有个隐藏的缝隙私下花了好几个早晨优化了代码。