vue 异步组建处理路由

 import SwLoading from '@/components/sw-loading'
 import env from '@/common/env'

 let arrRouter = [
     { name: 'AAAAA', url: 'page-aaaaa' },
     { name: 'bbbbb', url: 'page-bbbb' },


 ];

 /**
  * 异步组件
  * 
  * @param {string} pageName
  * @return {Component}
  */
 const AsyncComponentWrapper = (pageName) => () => ({
     component: import (`@/pages/${pageName}`),
     loading: SwLoading,
     delay: 200,
     timeout: 3000
 });

 //连接处理方法
 const urlPath = (url) => {
         return Array.isArray(url) ? url.join("/") : url;
     }
     /**
      * 格式化router 对象
      * @param {Array} arr 
      */
 const returnFormatRouter = (arr) => {

     return arr.map(item => ({
         ...item,
         component: AsyncComponentWrapper(urlPath(item.url)),
     }))
 };

 if (!env.isShare) arrRouter.pop();
 arrRouter = returnFormatRouter(arrRouter);

 export default arrRouter;

 

Vue内容加载顺序通常由组件的生命周期钩子和异步数据请求管理决定。如果你想改变默认的渲染顺序,可以考虑以下几个方面: 1. **`v-if` 和 `v-show`**:`v-if` 只在条件满足时渲染元素,而`v-show` 则始终渲染元素并切换其 CSS display 属性。如果你希望控制某个部分先于其他部分展示,可以在它们之间设置适当的显示条件。 ```html <template> <div v-if="showFirst"> <!-- 先加载的内容 --> </div> <div v-show="!showFirst"> <!-- 后加载的内容 --> </div> </template> <script> export default { data() { return { showFirst: true, // 起始时先显示第一个部分 }; }, methods: { async loadSecondContent() { // 当第一个部分加载完成后,切换 showFirst 为 false await this.loadFirstContent(); this.showFirst = false; }, }, }; </script> ``` 2. **`async` 函数和 `await`**:对于依赖网络请求的数据,你可以将这些请求放在生命周期钩子如 `mounted()` 或者自定义的 loading 状态处理函数中,待数据加载完成后再切换视图。 3. **`keep-alive`**:如果你需要复用某些组建,`keep-alive` 组件可以帮助缓存已渲染的部分,直到条件再次匹配时才更新内容。 4. **动态路由和懒加载**:在 Vue Router 中,你可以使用 lazy 加载属性,使得非当前视图的组件不会立即加载,直到导航到该组件。 5. **分页或滚动加载**:对于大量数据,可以采用分页或者滚动加载的方式,只加载用户可见区域内的内容。 记得处理好状态管理和错误提示,确保用户体验流畅。如果需要更具体的帮助,可以提供具体场景或需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值