精华内容
下载资源
问答
  • vue缓存页面

    2019-04-24 19:15:00
    vue如何和ionic的缓存机制一样,可以缓存页面,在A页面跳转至B页面后返回A页面时A页面的数据还在? 在app.vue中将router-view使用keep-alive包起来,使用v-if来判断使用使用被缓存的组件,在keep-alive外面也...
    vue如何和ionic的缓存机制一样,可以缓存页面,在A页面跳转至B页面后返回A页面时A页面的数据还在?
    • 在app.vue中将router-view使用keep-alive包起来,使用v-if来判断使用使用被缓存的组件,在keep-alive外面也需要写相同的router-view,用来处理不被缓存的视图组件。

    • 在路由配置里面对需要被缓存的页面进行配置。如下图所示:

    • 这里注意:transition标签下面只能有一个自元素标签,所以使用div将里面的元素包起来。
    • 页面缓存后,页面的部分内容又需要进行更新,在这种情况下要如何处理:需要将更改的信息写在activated里面,注意它不是在method里面。例如:
                 activated(){//缓存页面但是还有部分数据需要改动}

    转载于:https://www.cnblogs.com/kelly-sunshine/p/10764410.html

    展开全文
  • 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 缓存页面滑动的距离

    千次阅读 2019-05-10 11:37:26
    但是keep-alive却只能缓存页面和页面的数据,却不能缓存页面滑动之后和顶部的距离,从b页面回到a页面之后又是从最顶部开始的,如果页面较短还可以,但是如果页面很长的话,给用户的体验效果就会很差。这个时候...

    多读多写多记录,多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)


             vue的页面缓存,都知道是用keep-alive来进行缓存的。但是keep-alive却只能缓存页面和页面的数据,却不能缓存页面滑动之后和顶部的距离,从b页面回到a页面之后又是从最顶部开始的,如果页面较短还可以,但是如果页面很长的话,给用户的体验效果就会很差。这个时候就需要我们对页面的滑动距离也进行一下缓存了,下面开始写方法很简单的,不用去网上搜什么js代码实现的:

     

    vue-keep-scroll-position //缓存页面滑动距离
    
    //使用方法:
    
        1. 安装vue-keep-scroll-position:
            
            npm i -S vue-keep-scroll-position
        
        2. main.js中引入
    
            import VueKeepScrollPosition from 'vue-keep-scroll-position'
    
            Vue.use(VueKeepScrollPosition)
    
        3. app.vue使用
    
            <router-view v-keep-scroll-position></router-view>
    
    
    
                ok,就是这么简单,希望能帮助一些朋友。

     

    展开全文
  • 包裹页面组件,以缓存页面状态。包裹后,页面组件会增加 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缓存页面,通过keep-alive或变量的方式实现 用例 当前有三个页面:检索页、详情页与其他 页面结构如图: 左侧导航有筛选页和其他两个页面,筛选页筛选后内含详情页可跳转,通过详情页可返回至筛选页,或通过切换...
  • 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...
  • vue缓存页面【二】

    2019-04-24 19:18:00
    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染。 用法:运行结果描述:input输入框内,路由切换输入框内部的内容不会...结合router缓存部分页面:比较实用的例子:思路:通过...
  • vuex页面keepAliveCtrls.js: const state = { include_arr: [] } const getters = { get_clude_arr: state_ => state_.include_arr } const mutations = { setinclude_arr(state_,data) { state_....
  • 背景:想弄一个路由跳转时,保留当前页面数据,不然每次跳转回来后,就要重新写一遍,太麻烦了。 发现vue的标签,与标签搭配使用,可以达到目的。...//有时候,我们不一定需要缓存全部页面,只有部分页
  • vue缓存页面之keepAlive的使用

    千次阅读 2019-05-10 21:09:04
    要实现的功能是,在列表进入详情页后,返回列表页时,列表页不刷新,但是从其他导航页面进入列表页要刷新。 1、第一步:在app.vue使用keepalive <div id="app"> <keep-alive> <router-view v-if...
  • 开发中有些业务场景组件数据是不用刷新的,我将这些常用数据比作我们开发语言中的常量,一般情况下是不做改变的,也不用重新做接口请求,这里就是记载Vue中我们如何缓存组件数据以及它的生命周期 首先我们前端都...
  • 从列表页面进入详情页,返回列表页,列表页的数据不刷新,存在缓存中 设置路由 routes:[ { path: '/list', name:'list', component: list, meta: { keepAlive: true, // 是否缓存标志 title:'列表页' } },...
  • 1、在App.vue中使用keep-alive标签 <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta...
  • *思路是从C进入B,缓存B,其他页面进入B,不缓存 B页面: beforeRouteLeave(to, from, next) { from.meta.keeplive= false; next(); }, activated(){ //根据$route.meta }, C页面 // 返回上一页路由不刷新问题...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,272
精华内容 908
关键字:

vue缓存页面

vue 订阅