vue中router中的组件,vue-router第一次加载组件资源过多导致加载缓慢
本文主要介绍根据用户购买的不同服务，显示不同的页面。本文介绍的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
在实际项目中遇到的需求，有一些不好的实现方式。个人感觉功能更好的实现方式都实现了，但是对最终方案3354高层组件又开始了新的思考。
实际项目中遇到的需求
同一个链接需要加载不同的页面组件。根据用户购买的服务不同，显示不同的页面。
有一些不好的实现方式
把这些组件直接写在同一个组件下，用v-if判断。如果这样做的话，甚至可以不用vue-router，直接把所有组件都写在一个文件里，全部用v-if判断，也是可行的。(前提是几万行代码在一起，不麻烦的话)
在渲染这个链接时，直接请求后台数据，通过数据渲染不同的链接。(理论上可行，但如果用户不使用该功能，这些链接每次都提前取后台数据；另外，如果用户知道链接，直接访问链接，或者需要逻辑来确定用户应该看到哪个页面)
通过调用router.beforeEach，截取每条路由。当路由是我们指定的路由时，请求后台数据并动态跳转到页面。(功能可以完成，但实际上只是整个系统的一小部分，应该不会入侵整个路由系统。如果每个业务页面都写在全局路由系统中，那么路由的逻辑就太复杂了。)
个人感觉比较好的实现方式
在配置路由的地方获取服务器数据，并动态加载相应的组件。
{
路径：“商店KPI”，
//如果提前把后台数据存到商店里，在这里访问商店数据，就可以直接判断了。
//但是真的没有必要把这个具体业务页面的数据放在全局商店而不放在其他地方。
组件：()=import( @/views/store/data version )，
名称：商店_关键绩效指标，
MenuName:“商店员工”，
元：{
代码：[storeProduct.detail]
}
}
理想情况下，现实是组件接收的这个方法必须同步返回一个承诺。
这时候我想到了上面那个不好的实现方法1，稍微修改了一下。
！-chooseshokpi . vue-
模板
dataVersion v-if=！useNewShopKPI /
ShopKPI v-else /
/模板
脚本
从“lodash”导入{ get }；
从“@/api/store”导入{ getStoreReportFormVersion }；
从“”导入数据版本。/data version ；
从导入ShopKPI。/ShopKPI ；
导出默认值{
名称： ChooseShopKPI ，
组件：{
数据版本，
ShopKPI，
},
data() {
返回{ useNewShopKPI:false }；
},
已创建(){
getStoreReportFormVersion()。然后((res)={
if (get(res， data . data . new ){
this.useNewShopKPI=true
}
});
},
};
/脚本
style lang=css scoped/style
将路由渲染对应页面改为渲染中间页面ChooseShopKPI。
{
路径：“商店KPI”，
//如果提前获取后台数据，访问这里的店铺数据，就可以直接判断了。
//但是真的没有必要把这个具体业务页面的数据放在全局商店而不放在其他地方。
-component:()=import( @/views/store/data version )，
component:()=import( @/views/store/ChooseShopKPI )，
名称：商店_关键绩效指标，
MenuName:“商店员工”，
元：{
代码：[storeProduct.detail]
}
}
这样就实现了想要的功能。
功能已实现，但我又开始了新的思考
虽然这种方法解决了动态加载页面组件的问题。但是也有一些小问题。
如果通过服务器加载数据的页面数量随后增加，将会有多个ChooseXXX的中间页面。
这种中间页面实际上是经过两次路由的，不熟悉逻辑的开发者可能不知道其中的页面跳转逻辑，增加了理解成本。
最终方案——高阶组件
通过对选择XXX进行抽象，改造为动态加载组件
！- DynamicLoadComponent.vue
模板
组件：is=comp /
/模板
脚本
导出默认值{
名称：“DynamicLoadComponent”，
道具：{
renderComponent: {
类型：承诺，
},
},
data() {
返回{
comp: ()=this.renderComponent
}
},
已安装(){},
};
/脚本
style lang=css scoped/style
直接在路由的配置中获取后台数据，并进行路由的分发。这样路由逻辑都集中在路由配置文件中，没有二次路由。维护起来不会头疼脑胀。
动态加载组件组件也得以复用，后续新增判断后台数据加载页面的路由配置，都可以导向这个中间组件。
{
路径："商店KPI”，
component:()=import( @/views/store/components/动态加载组件)，
名称：商店_关键绩效指标，
menuName:店铺参谋，
元：{
代码：[商店产品：详细信息]，
},
道具：(路线)=({
渲染组件：新承诺((解决，拒绝)={
getStoreReportFormVersion()。然后((responseData)={
const useNewShopKPI=get(响应数据，数据。数据。shop _ do’)；
const useOldShopKPI=get(
响应数据，
数据。数据。存储_数据_显示
);
if (useNewShopKPI) {
resolve(导入( @/视图/商店/商店KPI ))；
} else if (useOldShopKPI) {
resolve(导入( @/视图/存储/数据版本))；
}否则{
resolve(import( @/views/store/ShopKPI/NOK pi service ))；
}
})。捕捉（拒绝);
}),
})
}
查看在线小例子（只支持铬合金)
https://stackblitz.com/edit/vuejs-starter-jsefwq?file=index.js
到此这篇关于某视频剪辑软件路由器根据后台数据加载不同的组件实现的文章就介绍到这了，更多相关某视频剪辑软件路由器后台数据加载不同的组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。