精华内容
下载资源
问答
  • vue缓存页面
    千次阅读
    2019-05-10 11:37:26

    多读多写多记录,多学多练多思考。----------- 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,就是这么简单,希望能帮助一些朋友。

     

    更多相关内容
  • 使用keep-alive属性包裹需要缓存页面使用v-if判断,为true的是需要缓存的,false是不需要缓存的 第三步 在需要缓存页面设置导航钩子,在A野区离开时将值设置为false保证离开当前野区不被偷 第四步 在其他野区...
  • vue 缓存页面不刷新

    2021-06-25 16:28:07
    让路由的name以及vue页面的name相同 user.js: newUser.vue:

    让路由的name以及vue页面的name相同
    user.js:
    在这里插入图片描述
    newUser.vue:
    在这里插入图片描述

    展开全文
  • Vue页面缓存解决方案feb-alive (上) 在剖析feb-alive实现之前,希望大家对以下基本知识有一定的了解。 keep-alive实现原理 history api vue渲染原理 vue虚拟dom原理 feb-alive与keep-alive差异性 1. 针对...
  • 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...

    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.keepAlive" />
      </div>
    </template>
    

    2、在路由处添加keepAlive属性

      {
        path: '/webScoket/index',
        component: Layout,
        children: [
          {
            path: 'webScoket',
            component: () => import('@/views/webScoket/index'),
            name: 'webScoket',
            meta: { title: 'webScoket', keepAlive: true, isBack: false }
          }
        ],
        // component: () => import('@/views/device/daddress'),
        hidden: true
      },
    

    3、在需要缓存的页面使用activated方法

      beforeRouteEnter(to, from, next) {
        // console.log('在之前植入', to.name)
        if (from.name === 'historyCompareChart_new') { // 这个name是下一级页面的路由name
          // console.log('在之前植入s')
          to.meta.isBack = true // 设置为true说明你是返回到这个页面,而不是通过跳转从其他页面进入到这个页面
        }
        next()
      },
      activated() {
        // console.log('返回进入:', this.$route.meta.isBack)
        if (!this.$route.meta.isBack || this.isFirstEnter) {
          this.getSiteList() // 这里发起数据请求,(之前是放在created或者mounted中,现在只需要放在这里就好了,不需要再在created或者mounted中请求!!)
        }
        this.$route.meta.isBack = false // 请求完后进行初始化
        this.isFirstEnter = false // 请求完后进行初始化
      },
    

    4、注意:在此页面要使用name需要与路由处的name一致:

    export default {
      // components: { JsonExcel },
      inject: ['reload'],
      name: 'menu_154',
      directives: {
        waves
      }
      }
    
    展开全文
  • 背景:想弄一个路由跳转时,保留当前页面数据,不然每次跳转回来后,就要重新写一遍,太麻烦了。 发现vue的标签,与标签搭配使用,可以达到目的。...//有时候,我们不一定需要缓存全部页面,只有部分页

    背景:想弄一个路由跳转时,保留当前页面数据,不然每次跳转回来后,就要重新写一遍,太麻烦了。
    发现vue的<keep-alive>标签,与<router-view>标签搭配使用,可以达到目的。

    //在.vue文件中,使用<keep-alive>标签包裹<router-view>标签
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
    //这样就可以将路由跳转页面缓存起来
    
    //有时候,我们不一定需要缓存全部页面,只有部分页面需要缓存
    <keep-alive>
        <router-view v-if="false"></router-view>
    </keep-alive>
    //将不需要缓存的路由隐藏掉就行了,这边推荐使用动态的控制方式
    
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    //动态控制,其中$route.meta.keepAlive数据来源设置在以下配置中
    

    index.js中设置路由跳转是否缓存

    new Router({
      routes: [
        {
          path: '/a',
          name: 'A',
          component: A,
          children: [
            {
              path: "/b",
              name: "B",
              component: B,
              meta: {
                keepAlive: false
              }
            },
            {
              path: "/c",
              name: "C",
              component: C,
              meta: {
                keepAlive: true
              }
            }
          ]
      ]
    })
    

    可能有人会和我一样想到如何清缓存的问题,不然大量的缓存存在你的本地,这样就很不行了。
    ps:路由跳转页面数据缓存只是临时缓存,当我们刷新页面时,这些缓存就会被自动清空,也是在跳转到新页面时,再跳转回来,这些缓存也会被清空。

    感慨:我一个后端服务开发人员,经过这一个月的前端vue开发,也算半个前端开发人员,多学点,准没错,哈哈哈

    展开全文
  • 结合router缓存部分页面: 比较实用的例子: 思路:通过beforeRouterLeave这个钩子来对路由里面的keepAlive进行赋值。从而动态的确定A页面是否需要被缓存。 结合router缓存部分页面: 比较实用的例子: 思路:...
  • 问题: vue在返回上一页的时候执行this.$router.go(-1) ,默认会让上一页重新执行...-- 缓存页面 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-a
  • 背景在日常的业务开发中,遇到了个问题,从一个列表页进入到子页面,当再次返回列表页的时候,用户希望保留之前的搜索信息,比如选中了分页为第4页或输入的搜索条件(id)之类的。列表页 -> 子页面子页面 -> ...
  • 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 + Vue-Router + Vuex 刚开始使用的方法是:关闭导航标签,直接调用对应的页面的$destory()...
  • VUE实现页面缓存

    千次阅读 2021-10-27 09:08:42
    主要利用keep-alive实现从列表页跳转到详情页,然后点击返回时,页面缓存不用重新请求资源。 一、在router里配置路由 import Vue from "vue"; import Router from "vue-router"; // 避免到当前位置的冗余导航 const...
  • 今天小编就为大家分享一篇vue项目强制清除页面缓存的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 比如有一个列表页面,然后列表每项都有一个详情,之前用vue1.x的时候,页面缓存基本没有什么问题。 在vue2.0中出现了列表页面是每次都重新加载数据,但是详情页面却只在第一次加载的时候调用数据,如果返回到列表...
  • 今天小编就为大家分享一篇Vue2.0 实现页面缓存和不缓存的方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 缓存页面并保留页面当前位置

    千次阅读 2020-07-07 15:58:52
    包裹页面组件,以缓存页面状态。包裹后,页面组件会增加 activated 和 deactivated 两个生命周期,前者在进入页面时触发,后者在离开页面时触发。由于页面被缓存,因此不会再触发 destroy 和 create 。 在生命周期...
  • Vue - 缓存页面(keepAlive)

    千次阅读 2022-01-17 15:04:57
    项目主流程缓存优化,主流程页面(组件)切换时保持之前加载的状态,避免反复渲染影响页面性能,同时也可以很大程度上减少接口请求,减小服务器压力。 例如,我们将某个列表类组件内容滑动到第 100 条位置,那么...
  • 开发中有些业务场景组件数据是不用刷新的,我将这些常用数据比作我们开发语言中的常量,一般情况下是不做改变的,也不用重新做接口请求,这里就是记载Vue中我们如何缓存组件数据以及它的生命周期 首先我们前端都...
  • vue缓存页面数据(刷新不丢失)

    千次阅读 2022-05-24 14:53:02
    vue中,实现缓存页面数据,并且刷新不丢失
  • 从列表页面进入详情页,返回列表页,列表页的数据不刷新,存在缓存中 设置路由 routes:[ { path: '/list', name:'list', component: list, meta: { keepAlive: true, // 是否缓存标志 title:'列表页' } },...
  • 1、路由2、数据状态{path: '/ST01',name: 'ST01',component: Main,children: [{path: '/ST01',meta: {moduleCode: '001',hideInMenu: true,title: '学员列表',notCache: true // 这里是否缓存},name: 'ST01',...
  • vue实现页面缓存,一般是缓存了所有的页面,如果不想缓存某一个页面可以使用一些判断实现。 缓存技术是 vue include 存放一个数组,include是需要缓存的组件 ``` <template> <div> <keep-alive ...
  • 场景:项目中遇到 vue 点击回退 从A页跳...利用keep-alive 缓存需要缓存页面 1.在app.vue中改写router-view $route.meta.keepAlive> <!-- 这里是会被缓存的视图组件,比如 page1,page2 --> <ro
  • <transition name="router-fade" mode="out-in"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view>...transition name="router-fade" mode="out...
  • *思路是从C进入B,缓存B,其他页面进入B,不缓存 B页面: beforeRouteLeave(to, from, next) { from.meta.keeplive= false; next(); }, activated(){ //根据$route.meta }, C页面 // 返回上一页路由不刷新问题...
  • vue页面缓存查询条件

    2021-02-23 11:20:49
    main.vue修改 <template> <div id="mainlayer" :class="{ 'is-sheet': isSheet }"> <div id="app"> <keep-alive :include="include"> <router-view v-if="$route.meta.keepAlive" /&...
  • vue使用keep-alive缓存页面 回到滚动位置
  • 实现场景:在页面中我们要实现每个页面自己能控制是否缓存,...-- 是否缓存页面:即每次进入页面是否刷新,若缓存则无法手动刷新页面 --> <router-view v-if="$route.meta.keepAlive&&isRouterViewShow
  • 主要介绍了详解基于vue的移动web app页面缓存解决方案,非常具有实用价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,338
精华内容 20,535
关键字:

vue缓存页面