vue路由切换页面的时候，卡顿：当前页面停留了一下，才切换到新页面

问题:我司项目嵌套了一个二开的编辑器页面，由于编辑器很大，初次进入编辑的时候需要加载很久大概3S左右才能显示页面。后续有需求需要通过router路由跳转到编辑器页面，每次在点击跳转按钮的时候会在当前页面停留4s到9s不等才能前往到编辑器页面。老总说用户体验很不好叫我先进入到编辑页面再去加载数据。(改成这样会导致白屏一段时间)

解决方案

使用defineAsyncComponent  API异步加载组件  可以接受一个返回 Promise 的工厂函数。Promise 的 resolve 回调应该在服务端返回组件定义后被调用。你也可以调用 reject(reason) 来表示加载失败。 

下面这个写法是对静态路由的使用

 {

    path: '/home',

    name: '/home',

    component: defineAsyncComponent(() => import('@/views/home/index.vue')),

    meta: {

      title: 'AI创意',

      static: true,  //静态路由标识

    },

  },

动态路由使用 components 就是懒加载的路由路径 类似 () => import('@/views/home/index.vue') 你只需要在你项目的返回懒加载路径改成我下面这个写法就可以了

不建议全部都使用异步加载，不然项目首次记载可能压力比较大卡顿 我们最好是在需要的路由判断下

// 寻找视图组件
export const matchedSysRouteComponent = (component: string, parmeName: string): any => {
  const sysRouteMap = getSysRouteMap();
// components 就是懒加载的路由路径 类似 () => import('@/views/home/index.vue') 你只需要在你项目的返回懒加载路径改成我下面这个写法就可以了
  let components = defineAsyncComponent(sysRouteMap[toSysViewComponentPath(component, parmeName)])
  // let components = sysRouteMap[toSysViewComponentPath(component, parmeName)]
  if (!components) {
    console.error("实时注册动态路由失败，未找到组件路径", components);
  }

  return components;
}