vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

从列表页 ------> 详情页，再从详情页 -----> 列表页，要保存上次已经加载的数据和自动还原上次的浏览位置

1. 缓存组件，vue2中提供了keep-alive。首先在我们的app.vue中定义keep-alive:

2. 下面在router.js即我们的路由文件中，定义meta信息

// news 是列表页

{

path: '/news ',

name: 'news ',

component: resolve => require(['@/view/news'], resolve),

meta: {

keepAlive: true // 通过此字段判断是否需要缓存当前组件

}

这里采用路由懒加载，也可以使用 import 来导入，无关紧要，接着看下面

2.缓存数据的实现

简单了解一下缓存相关的vue钩子函数。

设置了keepAlive缓存的组件：

第一次进入：beforeRouterEnter > created > … > activated->…->deactivated 后续进入时：beforeRouterEnter > activated > deactivated

可以看出，只有第一次进入该组件时，才会走created钩子，而需要缓存的组件中activated是每次都会走的钩子函数。所以，我们要在这个钩子里面去判断，当前组件是需要使用缓存的数据还是重新刷新获取数据.

3. 页面滚动位置的问题

我们知道，在vue这种单页应用中，如果你在a页面滚动了一段距离后，此时前往b页面后，b页面也会停留在a页面的滚动位置。这个问题的解决，我们可以利用router本身提供的功能来解决：

routes: [

{

path: '/detail',

name: 'Detail',

component: resolve => require(['@/view/detail'], resolve)

}

scrollBehavior (to, from, savedPosition) {

if (savedPosition) {

return savedPosition

} else {

if (from.meta.keepAlive) {

from.meta.savedPosition = document.body.scrollTop;

}

return { x: 0, y: to.meta.savedPosition || 0 }

}

scrollBehavior是路由提供的基础功能，这段函数写的是：

如果通过浏览器自带的前进后退按钮切换的路由，那么会自动使用浏览默认的回滚上次页面的浏览位置。

2.如果是通过vue路由进行的页面切换。例如a前往b，首先判断a是不是通过keep-alive缓存的组件，如果是，则在a路由的meta中添加一个savedPosition字段，并且值为a的滚动位置。最后return的是页面需要回滚的位置。如此一来，如果打开一个页面，该页面的组件路由中meta.savedPosition为undefined的话，则页面滚动到(0,0)的位置，这样解决了问题1。那么如果打开一个页面，它的路由的meta.savedPosition有值的话，则滚动到上次浏览的位置，因为meta.savedPosition保存的就是上次浏览的位置。

vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践相关推荐

vue项目实现详情页后退缓存之前的数据
vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员阅读数:244 一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息二.实现 ...
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据, 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经 ...
vue监听字符串长度_vue中的计算属性和侦听器
计算属性概念模板内的候通现端数是制这.效合应近环大过这业据的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护在重说道.础过学开概码数项遍间里哦行览屏屏 ...
在vue中实现picker样式_vue中van-picker的多列联动数据格式如何设置以及调用
一开始看到van-picker的多列联动的例子时,脑子是懵逼的,我即将要用的数据不可能这么简单啊,这叫我咋用! 然后一顿苦思冥想,再深读文档内极其稀少的信息,最后在多次尝试后,终于把结果试出来了.没错 ...
vue watch 第一次不执行_Vue 实现前进刷新，后退不刷新的效果
https://github.com/woai3c/Front-end-articlesgithub.com 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页, ...
vue暴露的全局方法_Vue中实现全局方法
内心背景:今天偶然上到论坛,看到关于Vue的两篇阅读量破千,我TM膨胀了啊.赶快再写一篇我开始用Vue时遇到的问题. 现实背景:很多时候我们会在全局调用一些方法. 实现方式两种:官网的实现use方法, ...
vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
vue 函数路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
vue打印props的值_vue中props传值方法
vue中props传值方法 1.开发环境 vue 2.电脑系统 windows10专业版 3.在使用 vue开发的过程中,我们经常会使用 props进行组件的传值,下面是我的分享,希望对你有所帮助! ...

vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践相关推荐

最新文章

热门文章