• 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")
        },
    
    ……………………
    
    
  • 相关阅读:
    springboot + 自定义配置文件读取
    springboot + mybatis分页插件pagehelper
    Python学习日记(三十九) Mysql数据库篇 七
    Python学习日记(三十八) Mysql数据库篇 六
    Python学习日记(三十七) Mysql数据库篇 五
    Python学习日记(三十六) Mysql数据库篇 四
    Python学习日记(三十五) Mysql数据库篇 三
    Python学习日记(三十四) Mysql数据库篇 二
    Python学习日记(三十三) Mysql数据库篇 一
    Python学习日记(三十二) hmac检验客户端的合法性和socketsever模块
  • 原文地址:https://www.cnblogs.com/panghu123/p/15545042.html
Copyright © 2020-2023  润新知