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")
},
……………………