vue 初始化项目未完成时 跳转路由延迟问题 页面切换过慢 (路由懒加载引起的问题)

vue 初始化项目未完成时 跳转路由延迟问题 页面切换过慢 (路由懒加载引起的问题)

由于项目过大,所以使用了路由懒加载,每次第一次切换路由的时候,都要去加载相应的组件(js文件),需要等文件加载完之后,路由才能切换过去;(非首次切换的路由就没有这个问题)

我碰到的问题是:前提: 项目初始化的时候,默认路由是首页,我刚进入页面的时候加载的是首页的js和其他数据(好处:白屏时间短些),其他页面都是路由懒加载的,所以我只要是不切换到相应的路由,路由所对应的文件就不会被加载

过程:我进入首页后,由于首页数据过多 ,我的首页上的登录按钮刷新出来后,我立马点击按钮,发现并没有反应(此时还是在加载首页的数据),要一直等到首页的数据加载完成了,才会接着加载登录页面的数据文件,加载完成了才进行跳转,等待的时间有点久

解决:我登录页面的路由不写成懒加载模式 (直接引用,不使用懒加载(不异步加载))

import Vue from "vue";
import Router from "vue-router";
import loginPage from '@/components/page/Login/Login.vue'

Vue.use(Router);

const VueRouterPush = Router.prototype.push;
Router.prototype.push = function push(to) {
  return VueRouterPush.call(this, to).catch(err => err);
};

export default new Router({
  // mode: 'history',
  routes: [
    {
      path: "/",
      redirect: "/home",
      name: "home"
    },
    {
      path: "/login",
      name: "login",
      // component: () => import("../components/page/Login/Login.vue")
      component: loginPage
    },
    {
      path: "/register",
      name: "register",
      component: () => import("../components/page/register/register.vue")
    },
    {
      path: "/home",
      name: "home",
      component: () => import("../components/page/home/home.vue")
    },

……………………

原文地址:https://www.cnblogs.com/panghu123/p/15545042.html