vue——列表页进详情页,第一次很慢,第二次就很快问题解决方法

参考:https://segmentfault.com/q/1010000010829474

问题:列表页进详情页,第一次很慢,第二次就很快。

原因:我原本是使用组件懒加载,每次第一次切换路由的时候,都要去加载相应的组件的js文件,需要等文件加载完之后,路由才能切换过去。后面切换的话js都下载过了,所以切换就不卡了。

原router.js:

import Vue from ‘vue‘
import Router from ‘vue-router‘

Vue.use(Router)

export default new Router({
  routes: [{
      path: ‘/‘,
      name: ‘Home‘,
      meta: {
        index: 0,
        keepAlive: true,
        title: ‘首页‘
      },
      component: resolve => require([‘../../../modules/Home‘], resolve)
    },
    {
      path: ‘/detail‘,
      name: ‘Detail‘,
      meta: {
        index: 1,
        keepAlive: false,
        title: ‘详情页‘
      },
      component: resolve => require([‘../../../modules/Detail‘], resolve)  //组件懒加载
    }]
})

改进后:

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Detail from ‘@/modules/Detail‘  // <== 修改

Vue.use(Router)

export default new Router({
  routes: [{
      path: ‘/‘,
      name: ‘Home‘,
      meta: {
        index: 0,
        keepAlive: true,
        title: ‘首页‘
      },
      component: resolve => require([‘../../../modules/Home‘], resolve)
    },
    {
      path: ‘/detail‘,
      name: ‘Detail‘,
      meta: {
        index: 1,
        keepAlive: false,
        title: ‘详情页‘
      },
      component: Detail  // <== 修改
    }]
})

原文地址:https://www.cnblogs.com/linjiangxian/p/12213020.html

时间: 2024-10-10 08:07:46

vue——列表页进详情页,第一次很慢,第二次就很快问题解决方法的相关文章

element ui源码解析 -- Pagination篇( 副:列表页进入详情页再返回后,如何保持当前页码正确 )

之所以看Pagination源码,由于一个问题: 需求:从列表页进入详情页后再返回,需求方希望保持在当前的页码而不是重新定位到第一页 问题:按照element ui文档设置current-page后请求的数据正常,但pagination的页码显示却不正确,不管current-page值等于多少,永远显示第一页 解决方案: 1. 改 :current-page="currentPage" 为 :current-page.sync="currentPage" 2.查询接

微信 HTML5 实现列表页与详情页无刷新返回 seesionStorage

最近在最微信端开发,遇到了一个比较有意思的问题. 1:商品分页列表页 2:商品详情页 需求:  实现当在第N页的列表页,点击ID=Num的商品详情页,跳转到详情页后,再点击返回按钮,依旧返回到列表第N页,并显式的改变ID=Num商品的查看状态 注:详情页与列表页是两个视图页,并且要考虑弱网请求服务端接口比较慢的情况 解决思路:使用sessionStorage 在列表页中将请求服务端接口返回的列表信息使用一个对象dataList存储起来,并记录当前的页码pageIndex,当点击跳转某个商品详情页

Meteor 从一个列表页进入详情页如何快速显示详情

不管是做android开发,还是做网页web开发,都 会有列表,都需要点击列表进入列表项的详情页面,查看详细信息,能常情况下,我们都是将这一列表项的id传到详情页,由详情页再到数据库查询详细信息. 在用Meteor开发网站中,除了用传id的方法,外还提供了一种简单的方法,极大的方便了我们的开发,节省时间. 原文:http://blog.csdn.net/casun_li/article/details/46371811 1. 创建详情页的route  并传数据: (1)如可按传id的方法,则这样

亿级商品详情页架构演进技术解密 | 高可用架构系列

亿级商品详情页架构演进技术解密 | 高可用架构系列 --http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=210272034&idx=1&sn=3be9d2b53c7fec88716ee8affd2515f8&scene=1&srcid=UfXZNNOVZZyZjQmp0VOh&from=groupmessage&isappinstalled=0#rd 此文是开涛在[三体高可用架构群]之分享内容

6.侧边栏菜单详情页

这是在viewpager里又加入了viewpager,先写viewpager,再写indicate 1. 菜单详情页基类 public abstract class BaseMenuDetailPager { public Activity mActivity; public View mRootView;// 根布局对象 public BaseMenuDetailPager(Activity activity) { mActivity = activity; mRootView = initV

从零开始,搭建博客系统MVC5+EF6搭建框架(5),博客详情页、留言、轮播图管理、右侧统计博文

一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效果 2.2实现控制器在前台控制器中创建一个Blog的控制器,主要是展示博客分类以及详情页 Action详情页实现: 1 /// <summary> 2 /// 详情页 3 /// </summary> 4 /// <param name="id"><

Vue详情页回列表页保存原数据与位置。

列表页关键代码 mounted() { //非从详情页返回时正常加载数据 if (!this.$route.meta.isBack) { //执行加载数据的方法 //重新加载页面 } else { // this.onFetching = true; this.curPage = sessionStorage.getItem('curPage'); //存储分页第几页,用于返回列表页继续可以分页 ... } //执行完初始化isBack this.$route.meta.isBack = fal

vue项目实现详情页后退缓存之前的数据

vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员 阅读数:244 一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息 二.实现 通过参考网上搜集的资料知道用keepAlive实现 参考地址:https://blog.csdn.net/sinat_17775997/article/details/80950246 1.在路由文件router.js中针对要缓存的页面进行设置 添加keepAlive: true,通过此字段判断是否

Activity 切换动画(小米图库列表进入详情页,图片从固定位置放大进入,缩小退出)

直接上效果图 ok,来分析下如何实现的吧 分析原理 首先确定,这是两个不同的 Activity,从图片列表页跳入到图片详情页:先来看进入详情页时的动画,从列表中所在 item 的位置一直放大到详情页的显示位置,这里我可以先告诉大家,当我们点击了这个 item 的时候,就已经启动了详情页,然后在详情页做相应的动画效果.既然是在详情页做动画效果,就需要在列表页把相应的值传过去,列表页 item 在屏幕上的位置,item 的大小,当然还有图片的资源,然后在详情页计算动画执行的参数.分析了进入动画,那么