精华内容
下载资源
问答
  • 主要介绍了vue路由缓存的几种实现方式,结合实例形式详细分析了vue.js路由缓存常见实现方式、使用技巧与操作注意事项,需要的朋友可以参考下
  • 今天小编就为大家分享一篇关于vue路由缓存清除在main.js中的设置,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue的keepAlive组件很适合解决这类问题, 但还是有缺陷, 比如很难灵活的根据路由来控制是否需要缓存, 只能简单的通过include来匹配是否需要缓存 整理后需求如下: 1. 组件能在部分页面缓存,脱离了这部分页面则清理...

    前言

    业务里经常有这样的需求, 页面跳转的时候保持前一个页面的状态跟数据, 方便返回时处理
    例如: A->B需要缓存, A->C不需要缓存
    网上大部分例子都需要去处理业务组件, 感到非常不合理
    故自己分享改功能用来处理此类问题

    vue的keepAlive组件很适合解决这类问题, 但还是有缺陷, 比如很难灵活的根据路由来控制是否需要缓存, 只能简单的通过include来匹配是否需要缓存

    整理后需求如下:

    1. 组件能在部分页面缓存,脱离了这部分页面则清理缓存
    2. 组件能全局缓存
    3. 最好从架构层面解决,不要干涉业务组件

    大致思路

    在路由meta里添加keealive:['路由的name'],确定生效的作用页面
    设置一个store来绑定keepalive
    在全局路由钩子里对该store处理

    代码如下

    路由meta里设置keepAlive,表示访问这些页面需要缓存组件

    // 路由配置
    {
        path: 'xxx',
        name: 'xxx',
        component: () => import('xxx'),
        meta: {
            title: 'xxx',
            keepAlive: ['路由name', 'b'],//作用域:缓存在这些页面留存
        },
    },

    在store里设置keepAliveIncludes用来绑定keepAlive 

    // vuex 设置跟删除缓存组件
    state: {
        keepAliveIncludes:[]
     },
    mutations: {
        // 设置缓存
        SET_KEEPALIVEINCLUDES: (state, data) => {
          const has = state.keepAliveIncludes.find(i=>i.path === data.path)
          if(!has){
            state.keepAliveIncludes.push(data)
          }
        },
        // 删除缓存
        DELETE_KEEPALIVEINCLUDES:(state, data) => {
          state.keepAliveIncludes = state.keepAliveIncludes.filter(i=>i.always)
        }
      },
    // 业务页面,使用keepAlive的组件
    <template>
      <keep-alive :include="keepAliveIncludes" >
        <router-view ref="content"/>
      </keep-alive>
    </template>
    
    <script>
    export default {
      computed: {
        'keepAliveIncludes'() {
          const arr = this.$store.state.keepAliveIncludes.map(i=>i.componentName)
          return Array.from(new Set(arr))
        },
      }
    </script>
    

    这样就将keepAliveIncludes跟keepalive组件绑定了
    因为keepAlive组件内部对include做了订阅,所以我们不用考虑怎么删除已有缓存,只需要对keepAliveIncludes这个值处理,组件内部会帮我们删除

    通过全局路由钩子处理keepAliveIncludes

    // 路由钩子
    router.beforeEach((to, from, next) => {
        // 将所有缓存页面的keepalive拿出来扁平化
        let cachePath = store.state.keepAliveIncludes.map(i => i.keepAlive).flat(Infinity)
        // 去了不缓存的页面就清理所有非常驻缓存组件
        if (!cachePath.includes(to.name)) {
            // console.log('去了不缓存的页面');
            store.commit('DELETE_KEEPALIVEINCLUDES')
        }
    
        if (to.meta.keepAlive) {
            // const componentsName = to.matched[to.matched.length-1].components.default.name
            store.commit('SET_KEEPALIVEINCLUDES', {
                path: `${to.name}`,
                componentName: to.name, //要求路由name跟默认组件的name保持一致
                always: to.meta.keepAlive.length === 0,
                keepAlive: to.meta.keepAlive,
            })
        }
    })

    过程

    先开始的执行执行思路如下:

    线判断是否匹配,匹配就缓存组件
    但是发现,keepAlive缓存的方法先于router.beforeEach执行,失败

    后来换了思路

    先缓存组件,然后在看是否匹配,不匹配就删除已有缓存

    中间还遇到了keepAlive的坑,vue官网上没有对已经缓存后的组件操作的API,所以网上查了很多资料,发现keepAlive已经对include做了订阅,只要include变化,不在include内已缓存的组件也会被清理掉

    附录

    此功能还是有缺陷的
    该方法需要默认路由组件name跟路由列表的name保持一致
    因为keepAlive的include指令接收的值是组件name,而我们使用的是异步载入组件,所以在router.beforeEach时,组件还没有实例化,没办法拿到组件的name
    当然如果是同步加载组件可以用下列代码拿到组件的name

    to.matched[to.matched.length-1].components.default.name

    如果有大佬知道如何解决欢迎留言讨论 

    展开全文
  • vue路由缓存

    2020-03-31 14:50:07
    前言 文档:https://www.cnblogs.com/qdwds/p/11706978.html
    展开全文
  • 【vue】vue路由缓存的几种方式

    千次阅读 2019-09-04 14:01:28
    下面就简单介绍几种 vue 路由缓存的几种方式。 1、全部缓存 <keep-alive> <router-view></router-view> </keep-alive> 直接用 keep-alive 标签包裹 router-vie...

    在我们的日常开发中,有时候会遇到页面的缓存,特别是电商的项目,在商品列表的一些状态都是要缓存下来的。

    下面就简单介绍几种 vue 路由缓存的几种方式。

    1、全部缓存

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

    直接用 keep-alive 标签包裹 router-view 标签就能缓存全部的页面了

    2、缓存单个指定路由

    <keep-alive include="该路由的name名称">
       <router-view></router-view>
    </keep-alive>

    同样直接用 keep-alive 标签包裹 router-view 标签,然后使用 include 指定需要缓存的页面的 name 名称

    可以使用 v-bind 绑定一个 name 数组,也可用 ',' 隔开,也可使用正则表达式,多个的情况建议使用第三种

    注意:是缓存页面的 name 名称,而不是缓存页面路由的 name 名称

    3、缓存多个指定路由

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

    使用两个 router-view 标签分别作为缓存和不缓存的路由出口,在路由配置的时候,只需要给要缓存的页面加上 meta 属性,然后添加 keepAlive 属性设置为 true 即可。例如:

    {
    	path:'/test',
    	name:'Test',
    	component: Test,
    	meta: {keepAlive: true} //true缓存 false不缓存
    }

    四、activated和deactivated

    activateddeactivated 这两个生命周期函数一定是要在使用了 keep-alive 组件后才会有的,否则则不存在。

    当引入 keep-alive 的时候,页面第一次进入

    钩子的触发顺序 created-> mounted -> activated,退出时触发deactivated。

    当再次进入(前进或者后退)时,只触发 activated

    注意:keep-alive里面紧跟包裹 router-view 组件,而不能出现其他标签,不然会导致无法缓存页面。

    如果需要在路由不变的情况下,无白屏刷新页面,请参照我的博客:

    路由不变,无白屏刷新页面

    展开全文
  • 一 ,缓存全部路由 在router-view外包裹keep-alive 例: <keep-alive> <router-view>...二 ,指定路由缓存 使用 include <keep-alive include="该路由的name名称"> <r...

    一 ,缓存全部路由

    在router-view外包裹keep-alive
    例: 
    	<keep-alive>
          <router-view></router-view>
        </keep-alive>
    

    二 ,指定路由缓存

    使用  include
    <keep-alive include="该路由的name名称">
      <router-view></router-view>
    </keep-alive>
    

    三,存在多个路由时,想缓存部分路由

    使用 meta
    在路由中添加下面属性  
        meta: {keepAlive: true // 缓存}
        meta: {keepAlive:false // 不缓存 }
        例:
        	 {
    	          path:'/Distribution',
    	          name:'Distribution',
    	          component: Distribution,
    	          meta: {keepAlive: true // 缓存}
    		 }
    然后在页面  
    	<keep-alive >
    		//当前进入的路由 meta里面 keepAlive为true时走这里
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        
        //当前进入的路由 meta里面 keepAlive为false时走这里 下面 if 判断进行了取反处理
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    
    展开全文
  • Vue路由缓存

    2020-06-23 18:07:36
    Vue路由缓存 <keep-alive> <router-view></router-view> </keep-alive>
  • app.vue 入口页面 <keep-alive :include="includedComponents"> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta....
  • vue路由缓存清除在main.js中设置

    千次阅读 2019-03-18 20:00:48
    /* 页面数据缓存 */ var _CACHE_OBJS = {}; function _init_cache(comp, key, cache) { var obj = cache[key]; if (obj !== undefined) { comp[key] = obj; } var deep = typeof comp[key] === '...
  • 【前端】VUE路由缓存

    2021-08-19 19:48:25
    缓存单个指定路由 <keep-alive include="该路由的name名称"> <router-view></router-view> </keep-alive> 缓存多个指定路由 <keep-alive> <router-vi...
  • vue中清除路由缓存

    2021-11-04 11:26:24
    场景: A跳转B,B跳转C。B在A第一次跳转B的时候,做了缓存,A在跳转B的时候,就不会重新走生命...所以这样在下次pageA跳转pageB的时候,就不会因为有缓存数据而读取首次的缓存数据,而在pageC返回pageB的时候,也去读
  • 2.路由配置详情 import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from '../views/Home.vue'; import Layout from '../views/Layout.vue'; import Redirect from '../redirect/redirect.vue...
  • 主要介绍了Vue动态路由缓存不相互影响的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue设置路由缓存

    2020-07-28 20:52:51
    Vue路由开启keep-alive缓存页面 mode:hash模式下: HTML部分: 1 2 3 4 5 6 7 8 <template> <div id="app"> <keep-alive> <!--使用...
  • vue 路由缓存

    2021-09-07 23:46:36
    vue 路由缓存 一般我们会在列表上使用,列表滚动到下面然后跳转详情返回还想继续显示滚动条位置 路由配置: { // 列表 path: '/list', name: 'list', component: list, meta: { keepAlive: true, title: '...
  • vue 路由页面缓存

    2021-08-04 14:47:02
    这次说说VUE缓存页面的问题 现在前端做APP的话,估计很少人会直接去用VUE cli来写,因为那样特别麻烦,你得配置很多东西。填很多坑!现在如果要求前端H5来做个APP,估计大家很多都会选择uniapp,MUI等这些主流框架...
  • 下面就简单介绍几种 vue 路由缓存的几种方式。 1、全部缓存 <keep-alive> <router-view></router-view> </keep-alive> 直接用 keep-alive 标签包裹 router-view 标签就能缓存全部的页面了...
  • 主要介绍了vue spa应用中的路由缓存问题与解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 问题 : 当两个地址都匹配同一个组件时 , 路由地址发生变化内容并没有跟着更新 原因 : 这个组件在路由切换的过程中,并没有重新销毁生成不会重复执行setup 解决办法 方法1 : 给router-view 添加key属性 <router-...
  • vue 路由缓存点击下一页返回之前的页面在原先的滚动位置 1. app.vue <template> <div class="app" id="app"> <!-- transition 是我这里的路由过渡动画 --> <transition :name="transition...
  • 一、路由缓存 我们在以后使用 Vue 做系统的时候,难免会遇到表单,填写完成后,不小心点错了按钮跳到了另外一个页面,当你再切回来的时候,你会发现整个表单啥也没有了。 再或者是一个比较大的页面,如果每次进来...
  • 形如: ...如果只是变化?后面的参数,页面组件并不会响应 ...以上这篇vue 解决路由只变化参数页面组件不更新问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 本事增加了路由缓存,我想切换页面的时候iframe里面的数据不变
  • 今天小编就为大家分享一篇解决vue更新路由router-view复用组件内容不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在 路由配置文件中进行配置 那个需要缓存的话 在路由对象下面添加一个属性 meta:{keepAlive } 专门用来存储用户自定义的属性 不需要缓存路由就不用添加 {  path: '/category',  name:'home', ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,993
精华内容 7,997
关键字:

vue路由缓存

vue 订阅