精华内容
下载资源
问答
  • <template> <div </div> </template> <script> export default { methods: { }, beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `...
  • vue缓存页面返回到指定滚动位置

    千次阅读 2018-11-08 09:49:53
    vue缓存页面使用了keep-alive返回不会指定到滚动位置,添加了下文中的activated方法,直接使用 this.$refs.content.scrollTo(0,this.scroll);跳到指定滚动位置,其中this.scroll是记录的上次滚动的位置。 vue 中...

    vue缓存页面使用了keep-alive返回不会指定到滚动位置,添加了下文中的activated方法,直接使用 this.$refs.content.scrollTo(0,this.scroll);跳到指定滚动位置,其中this.scroll是记录的上次滚动的位置。

    vue 中注册滚动事件与dom 并无不同

    以下配合keep-alive 组件使用

    在 mounted 注册滚动事件 

    1

    this.handleScroll 获取scrollTop

    1

    2

    3

    mounted(){

      window.addEventListener('scroll'this.handleScroll);

    }

      

    1

    2

    3

    4

    handleScroll () {

      let scrollTop = document.body.scrollTop;

      this.scroll = scrollTop;

    }

    keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

    1

    2

    3

    4

    5

    6

    7

    activated() {

        if(this.scroll > 0){

           window.scrollTo(0, this.scroll);

           this.scroll = 0;

           window.addEventListener('scroll'this.handleScroll);

        }

    }

    keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

    1

    2

    3

    deactivated(){

         window.removeEventListener('scroll'this.handleScroll);

    }

    展开全文
  • VUE缓存页面,通过keep-alive或变量的方式实现 用例 当前有三个页面:检索页、详情页与其他 页面结构如图: 左侧导航有筛选页和其他两个页面,筛选页筛选后内含详情页可跳转,通过详情页可返回至筛选页,或通过切换...

    VUE缓存页面,通过keep-alive或变量的方式实现

    用例

    当前有三个页面:检索页、详情页与其他
    页面结构如图:
    在这里插入图片描述
    左侧导航有筛选页和其他两个页面,筛选页筛选后内含详情页可跳转,通过详情页可返回至筛选页,或通过切换左侧导航标签,进入筛选页或详情页。

    需求:点击筛选页进入筛选页,进入详情页时保留筛选数据,从详情页返回时离开时的筛选数据仍渲染在页面上。而从其他入口切换至筛选页则不保留筛选数据。

    实现方式

    1.keep-alive
    2. keep-alive结合meta实现
    3.通过变量控制

    keep-alive

    首先,我们从简单的需求说起,即无论从哪个页面切入都需缓存筛选页。
    那么此时使用keep-alive是比较合适的。
    keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。

    <keep-alive>
    	<router-view></router-view>
    </keep-alive>
    

    当组件被包裹在keep-alive中时,组件的状态会被保留。除了保留筛选数据可以用到,还可以保留浏览位置等。但是需要注意的是:keep-alive会把所有加载过的界面都缓存起来,在返回时无法将界面销毁掉,导致再进入时没有重新加载这个界面。可以在点击返回按钮的时候(使用beforeRouteLeave)调用this.$destroy(true)将界面销毁。

    keep-alive与meta

    通过meta设置变量分情况缓存页面。
    1.在路由中配置meta:

    {
    	path: '/test/filter',
    	name: 'filter',
    	component: filter,
    	meta: {
    		keepAlive: true    //此组件需要缓存
    	},
    	path: '/test/other,
    	name: 'other',
    	component: other,
    	meta: {
    		keepAlive: false    //此组件不需要缓存
    	},
    	path: '/test/detail,
    	name: 'detail',
    	component: detail,
    	meta: {
    		keepAlive: false    //此组件不需要缓存
    	}
    }
    

    2.分情况包裹keep-alive

    <keep-alive>
    	<router-view v-if="$router.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$router.meta.keepAlive" />
    

    3.在筛选页通过beforeRouteEnter

      beforeRouteLeave (to, from, next) {
        if (to.name === detail' && from.name === 'filter') {
          from.meta.keepAlive = true
        } else if (to.name !== detail' && from.name === 'filter') {
          from.meta.keepAlive = false
        }
        next()
      }
    
    

    通过变量控制

    思路是,设置一个初始值为false的变量(本例中为clear),在组件中通过watch监听clear的变化,当clear为true时,清除缓存。

    <script>
    	export default{
    		data(){
    			return{
    				clear: false
    			}
    		},
    		beforeRouteLeave (to, from, next) {
    			if(to.name !== 'detail') {
    				this.clear = true
    				setTimeout(()=>{
    					this.clear = false
    				})
    			}else{
    				this.clear = false
    			}
    			next()    // 不要忘记写next()
    		},
    		watch: {
    			clear(newVal, oldVal){
    				if(newVal){
    					// to do 清除缓存数据
    				}
    			}
    		},
    	}
    </script>
    
    展开全文
  • VUE缓存页面解决办法

    千次阅读 2019-03-22 15:03:13
    第一步,在router的index.js中meta增加...第二步,index.vue写法如下 <!-- <transition name="fade-transform" mode="out-in"> --> <keep-alive> <router-view v-if="$route.meta.keepAlive...

    第一步,在router的index.js中meta增加属性:keepAlive: true

    第二步,index.vue写法如下

    <!-- <transition name="fade-transform" mode="out-in"> -->

    <keep-alive>

    <router-view v-if="$route.meta.keepAlive" class="routerView"></router-view>

    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive" class="routerView"></router-view>

    <!-- </transition> -->

    展开全文
  • 包裹页面组件,以缓存页面状态。包裹后,页面组件会增加 activated 和 deactivated 两个生命周期,前者在进入页面时触发,后者在离开页面时触发。由于页面被缓存,因此不会再触发 destroy 和 create 。 在生命周期...

    用户从页面A跳转到页面B,过一会又返回页面A,并且希望页面A依然保留着上次离开时所浏览的位置。该如何实现呢?

    步骤 

    1. 用 <keep-alive> 包裹页面组件,以缓存页面状态。包裹后,页面组件会增加 activateddeactivated 两个生命周期,前者在进入页面时触发,后者在离开页面时触发。由于页面被缓存,因此不会再触发 destroy 和 create 。
    2. 在生命周期函数 deactivated 中,记录离开时的位置,存于data中。
    3. 在生命周期函数 activated 中,将页面滚动到上次离开的位置。

    代码

    在App.vue中,用 <kepp-alive> 将 <router-view> 包裹。

    <template>
      <div id="app">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
        <main-tab-bar></main-tab-bar>
      </div>
    </template>

    某页面.vue 的 activated 和 deactivated 生命周期函数中写下这些代码。:这里用了BScroll框架封装scroll,故需自行修改。

      activated() {
        this.$refs.scroll.scrollTo(0, this.saveY, 0);//跳转到(0,this.saveY)的位置,时间为0
        this.$refs.scroll.refresh();//BScroll需要经常刷新,不然会有问题
      },
      deactivated() {
        this.saveY = this.$refs.scroll.scroll.y;//离开页面时,存储位置
      },

     

    展开全文
  • vue 缓存页面滑动的距离

    千次阅读 2019-05-10 11:37:26
    但是keep-alive却只能缓存页面和页面的数据,却不能缓存页面滑动之后和顶部的距离,从b页面回到a页面之后又是从最顶部开始的,如果页面较短还可以,但是如果页面很长的话,给用户的体验效果就会很差。这个时候...
  • 问题: vue在返回上一页的时候执行this.$router.go(-1) ,默认会让上一页重新执行...-- 缓存页面 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-a
  • 背景:想弄一个路由跳转时,保留当前页面数据,不然每次跳转回来后,就要重新写一遍,太麻烦了。 发现vue的标签,与标签搭配使用,可以达到目的。...//有时候,我们不一定需要缓存全部页面,只有部分页
  • 开发中有些业务场景组件数据是不用刷新的,我将这些常用数据比作我们开发语言中的常量,一般情况下是不做改变的,也不用重新做接口请求,这里就是记载Vue中我们如何缓存组件数据以及它的生命周期 首先我们前端都...
  • 从列表页面进入详情页,返回列表页,列表页的数据不刷新,存在缓存中 设置路由 routes:[ { path: '/list', name:'list', component: list, meta: { keepAlive: true, // 是否缓存标志 title:'列表页' } },...
  • vue缓存页面之keepAlive的使用

    千次阅读 2019-05-10 21:09:04
    要实现的功能是,在列表进入详情页后,返回列表页时,列表页不刷新,但是从其他导航页面进入列表页要刷新。 1、第一步:在app.vue使用keepalive <div id="app"> <keep-alive> <router-view v-if...
  • *思路是从C进入B,缓存B,其他页面进入B,不缓存 B页面: beforeRouteLeave(to, from, next) { from.meta.keeplive= false; next(); }, activated(){ //根据$route.meta }, C页面 // 返回上一页路由不刷新问题...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,822
精华内容 15,528
关键字:

vue缓存页面

vue 订阅