精华内容
下载资源
问答
  • app.vue 入口页面 <keep-alive :include="includedComponents"> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta....

    app.vue 入口页面

    <keep-alive :include="includedComponents">
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    import {mapGetters} from 'vuex';
    computed: mapGetters(['includedComponents'])

    路由配置:加meta

    {
        path:'arrive',
        name:'到达',
        meta:{keepAlive:true}   //如果需要用keep-alive 缓存的话,必须使用name 去跳转路由
        components:''
    }

    arrive.vue需要缓存的页面:

    beforeRouteLeave(to,from,next){
        if(to.name == '') //判断是加缓存还是清理掉缓存
        this.$store.dispatch('setCache',this.$options.name)  //加缓存      或者 this.$options.name = "arrive"
        this.$store.dispatch('clearCache','arrive')  //清理缓存      或者 this.$options.name = "arrive"
    }

    vuex页面截图;

    vue 路由缓存页面(beforeRouteLeave)

    vue 路由缓存页面(beforeRouteLeave)

    展开全文
  • vue 路由页面缓存

    2021-08-04 14:47:02
    这次说说VUE缓存页面的问题 现在前端做APP的话,估计很少人会直接去用VUE cli来写,因为那样特别麻烦,你得配置很多东西。填很多坑!现在如果要求前端H5来做个APP,估计大家很多都会选择uniapp,MUI等这些主流框架...

    VUE框架真的很神奇,神奇到好多坑你都要填

    这次说说VUE里缓存页面的问题

    现在前端做APP的话,估计很少人会直接去用VUE cli来写,因为那样特别麻烦,你得配置很多东西。填很多坑!现在如果要求前端H5来做个APP,估计大家很多都会选择uniapp,MUI等这些主流框架,一套代码适配多端,很方便。

    接下来就说说,vue cli做APP遇到的问题,页面缓存

    因为总会要做到A-B,B选择完或者处理完业务返回到A,大家都知道,VUE默认是会销毁页面的,就是一般情况下,A->B页面,C回B页面后,A其实已经重新刷新渲染了,你之前填写的数据就会没了,但是我们需要的是我在A页面填写完东西,在不请求保存接口都时候我要留着数据在页面,还需要去B页面拿取一些数据返回A显示。这时候就要做到页面缓存了。

    刚开始我用的仅仅是判断keep-alive

     <div id="app">
    	<keep-alive>
    		<router-view v-if='$route.meta.keepAlive' class="view"></router-view>
    	</keep-alive>
    	<router-view v-if='!$route.meta.keepAlive' class="view"></router-view>
    </div>
    

    然后再去缓存的页面判断

    //路由守卫判断前进后退是否保存
    beforeRouteLeave(to, from, next) {
    	 if (to.path == "/B") {
    		 from.meta.keepAlive = true;
    	 }else{
    		 from.meta.keepAlive = false;
    	 }
    	 next();
    },
    

    最后发现这样的方式虽然简单,但是容易出bug,就是我返回的时候其实他这个页面并没有清除缓存,当你再次进入缓存的B页面,再进入下一个C页面返回的时候,B页面就会把上一次的东西带出来了,相当于,把上一次的缓存拿过来了,这样的方式很不好,最后查阅资料,发现还是用vuex加include好用,并且没有什么bug,缓存点设置和清除都很好
    下面是代码

    //-------router.js----------
    
    //在你配置路由的页面,设置好keepAlive和index
    
    {
      path:'/A',
      name:'A',
      components:Home,
      meta:{
        keepAlive:true //需要被缓存的组件
         index:1       //下标,标识
     },
     {
      path:'/B',
      name:'B',
      components:Book,
      meta:{
         keepAlive:false, //不需要被缓存的组件
         index:2		
     } 
    
    
    	//----App.vue------
    	//在app.vue里面,在keep-alive里加入include,可以看看vue官网keep-alive的说明文档
    	<div id="app">
    			<keep-alive :include="keepAlive">
    			       <router-view class="view"></router-view>
    			</keep-alive>
    	</div>
    
    	js部分加入
    	computed: {
    			keepAlive() {
    				return this.$store.getters.keepAlive    //将页面存入vuex
    			}
    		},
    
    //vuex里面加入keepalive相关
    
    
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
    	state: {
    		keepAlive: []
    	},
    	mutations: {
    		setKeepAlive: (state, keepAlive) => {
    			state.keepAlive = keepAlive
    		}
    	},
    	getters: {
    		keepAlive: state => state.keepAlive
    	}
    })
    
    export default store
    
    //main.js引入这个js文件
    
    在这里插入代码片
    

    接下来就是处理缓存页面和清除缓存了

    //在A页面用路由守卫处理
    beforeRouteLeave(to, from, next) {
    	if(to.name.indexOf('A') > -1) {
    		this.$store.commit('setKeepAlive', [])   //清除缓存
    	}else{
    		this.$store.commit('setKeepAlive', ['B']);  //设置缓存
    	}
    	next()
    },
    

    这样就可以实现页面缓存的效果了,
    如果有人不起作用,你一定要看看你缓存的那个页面,有没有加name=“B”,因为include认的是页面的name,必须保持一致

    还有人可能想问,A->B->C,我想B缓存,B去C处理业务缓存B,B返回A清空缓存,怎么弄?
    其实一样的,只需要在A页面的跳转B页面的方法里加上

    //把B页面缓存起来
    this.$store.commit('setKeepAlive', ['B']) 
    

    然后缓存B的方法跟上面缓存A的一样就行;

    如果有错误的地方,欢迎指正。

    展开全文
  • 关于VUE路由跳转的缓存问题

    千次阅读 2021-02-05 00:17:52
    由于自己是刚学的vue,所以对vue挺多不解的问题。希望各位码友能够指出我的不对,或者给我更好的建议。关于项目最近在做一个项目,整个项目是由vue+vue-router+vue-cli+webpack+mui+H5 plus+ 构建的一个混合开发项目...

    由于自己是刚学的vue,所以对vue挺多不解的问题。希望各位码友能够指出我的不对,或者给我更好的建议。

    关于项目

    最近在做一个项目,整个项目是由vue+vue-router+vue-cli+webpack+mui+H5 plus+ 构建的一个混合开发项目。通过Hbuilder打包成APK。原本项目是直接在Hbuilder开发的,使用的也是Hbuilder自动生成的框架。后来想把项目重构。所以才有机会学习webpack+vue-cli+vue-router,可是问题来了,相对于一些安卓版本较低的手机来说,重构的项目在手机里经常崩掉。我想了解一下是什么原因呢?手机的问题,还是说vue不适合做混合式开发。

    关于VUE路由缓存问题。

    不知大家有没有遇到一个问题就是,经常路由间的跳转会出现一些缓存的问题,解决起来很麻烦,那么先讲讲我在项目中怎么处理这些缓存问题。

    这是整个资源文件的目录,也就是vue-cli构建的整个项目,在这个router文件夹下的index.js引入组件。

    4bba7bb36c89?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    项目目录

    基本上组件都是这样引入

    import Vue from 'vue'

    import Router from 'vue-router'

    import Index from '@/pages/index'

    import Login from '@/pages/login'

    import Home from '@/pages/home'

    Vue.use(Router)

    export default new Router({

    routes: [{

    path: '/index',

    name: 'Index',//要注意这里要引号,之前这里没加引号,爬了好久

    component: Index,

    },

    {

    path: '/login',

    name: 'Login',

    component: Login,

    },

    {

    path: '/home',

    name: 'Home',

    component: Home,

    }]

    })

    页面之间的跳转,我用的是这种方式:

    例如我在index.vue页面想跳到login.vue页面时

    this.$router.push({

    name: 'Login',

    params: {

    data:'abc'

    }

    });

    如果login.vue页面是没有加载过的话,就会按照生命周期执行,但是下次在进入这个login页面,login页面是不会刷新的,当然我们可以利用路由的activated方法来重新刷新数据。

    export default {

    data() {

    return {}

    },

    activated(){

    this.init();

    },

    methods:{

    init(){},

    }

    }

    这样一来,每次进入login页面都会刷新数据,避免了有时候数据的缓存导致了信息的不一致。

    那么问题来了,假如我想index页面进入login时刷新数据,而home页面进入login页面不刷新数据,该怎么操作?我本来的做法是每次在路由的params里添加一个标志是否刷新页面的参数过去就行啦,例如:

    this.$router.push({

    name: 'Login',

    params: {

    data:'abc',

    isFresh:true//标志刷新,false为不刷新

    }

    });

    login页面对isFresh进行判断,作出相应的处理

    export default {

    data() {

    return {}

    },

    activated(){

    if(this.$route.params.isFresh){

    //注意路由跳转时$router.push()和$route.params的route,一个带r

    this.init();

    }else{}

    },

    methods:{

    init(){},

    }

    }

    但是这样一来很多页面进入login页面都要携带一个是否刷新的标志。这样的话会非常的不方便。

    后来发现了导航守卫的beforeRouteEnter方法,感觉可以在这个方法里处理一下逻辑。但是不好的一点是beforeRouteEnter方法是没办法使用this去执行init();

    export default {

    data() {

    return {}

    },

    activated(){

    },

    methods:{

    init(){},

    },

    beforeRouteEnter(to, from, next) {

    if (from.name == 'Index') {

    this.init();//执行不了

    }

    next();

    }

    }

    但是有种方法可以解决this不能使用的问题

    export default {

    data() {

    return {}

    },

    activated(){

    if (this.$route.meta.isFresh) {

    init();

    }else{}

    this.$route.meta.isFresh = false;//记得这里一定要设置一下false。

    },

    methods:{

    init(){},

    },

    beforeRouteEnter(to, from, next) {

    if (from.name == 'Index') {

    to.meta.isFresh = true;

    }

    next();

    }

    }

    这样一来,所有页面的刷新与否都在login页面处理了。虽然这两种方法用起来差不多,代码量也差不多,但是我还是觉得在login页面可以统一处理,逻辑会清晰很多。

    没有用过keep-Alive,所以不懂keep-Alive是否有强大作用,希望各大码友摔个链接让我膜拜一下,我处理刷新缓存问题都是用以上方法,但是这样刷新也是挺烦的,不知道有没有更好的方法对于这种刷新缓存的问题。

    展开全文
  • 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-Router实现前端页面缓存

    千次阅读 2021-01-17 17:37:00
    一、使用情景在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业务场景下,比如:在有分页...
  • 下面就简单介绍几种 vue 路由缓存的几种方式。 1、全部缓存 <keep-alive> <router-view></router-view> </keep-alive> 直接用 keep-alive 标签包裹 router-view 标签就能缓存全部的页面了...
  • /* 页面数据缓存 */var _CACHE_OBJS = {};function _init_cache(comp, key, cache) {var obj = cache[key];if (obj !== undefined) {comp[key] = obj;}var deep = typeof comp[key] === 'object';comp.$watch(key,...
  • 本文实例讲述了vue路由缓存的几种实现方式。分享给大家供大家参考,具体如下:在我们的日常开发中,有时候会遇到页面的缓存,特别是电商的项目,在商品列表的一些状态都是要缓存下来的。下面就简单介绍几种 vue 路由...
  • 当使用路由跳转到其他页面的时候,要求缓存当前页面,比如列表页面跳转到详情页面,需要缓存列表内容,并且保存滚动条位置,也有时候需要缓存页面里面有部分内容不缓存,总之各种情况,下面就列举其中一些例子 vue...
  • 场景Vue移动端单页面应用,首页→列表(刷新)→详情,详情→列表(不刷新)→首页.思路利用缓存列表页实例,通过列表页的beforeRouteLeave导航守卫存储参数isRefresh到localStorage,从而在每一次进入列表页组件的active...
  • 页面动画切换,没做页面缓存,每个页面都要刷新(App.vue)*{margin: 0; padding: 0;}export default {data() {return {transitionName: ""}},watch: {'$route'() {if(window.$isBack != null){this.transitio...
  • 使用路由的keepAlive方法,keepAlive为true就会保留页面缓存。(返回该页面不会执行created和mounted)。在activated恢复页面滚动高度。 工具: 移动端。使用到vant的van-pull-refresh 解决方法: 1.router.js把a页面...
  • vue中清除路由缓存

    2021-11-04 11:26:24
    现在问题来了,如何解决紫色圈中的问题,清除pageB的页面缓存。 解决思路: 每次在pageB 返回pageA的时候,清除pageB 的缓存数据。 所以这样在下次pageA跳转pageB的时候,就不会因为有缓存数据而读取首次的缓存数据...
  • 一.vue 路由带参数跳转,页面缓存,问题的解决方法 a.从mv点击到mv详情页,第一次是没有问题的,返回列表再次选择一个不同的mv点击详情,数据还是第一次的数据 <template> <div @click="mvHandle(item.id)...
  • 问题 : 当两个地址都匹配同一个组件时 , 路由地址发生变化内容并没有跟着更新 原因 : 这个组件在路由切换的过程中,并没有重新销毁生成不会重复执行setup 解决办法 方法1 : 给router-view 添加key属性 <router-...
  • Vue中如何缓存页面

    2021-08-31 16:21:58
    Vue中经常会遇到需要缓存页面的情况,如果不对Vue进行处理,那么Vue默认是不会缓存页面的。例如从菜谱列表界面进入到菜谱的详情页后,再从菜谱详情页中返回到菜谱列表页面中时,菜谱列表是不需要进行刷新的,一个...
  • VUE3-------路由缓存

    2021-06-01 20:53:42
    VUE3-------路由缓存 文章目录VUE3-------路由缓存问题一、vue3中路由的使用setup中使用route或者是router实例二、解决问题1.使用watch监听解决路由缓存问题1.技术实现:2.代码落地:2.使用key去解决路由缓存问题1....
  • 一、路由缓存 我们在以后使用 Vue 做系统的时候,难免会遇到表单,填写完成后,不小心点错了按钮跳到了另外一个页面,当你再切回来的时候,你会发现整个表单啥也没有了。 再或者是一个比较大的页面,如果每次进来...
  • Vue3中的keep-alive路由缓存

    千次阅读 2021-05-20 10:13:44
    Vue3中的路由缓存Vue不同,在vue2中只需要使用<keep-alive>将<router-vue/>包裹起来即可,但是在Vue3中,该方法不生效,我们需要使用作用域插槽如下: <router-view #default="{Component}"> ...
  • 背景在日常的业务开发中,遇到了个问题,从一个列表页进入到子页面,当再次返回列表页的时候,用户希望保留之前的搜索信息,比如选中了分页为第4页或输入的搜索条件(id)之类的。列表页 -> 子页面子页面 -> ...
  • 路由id变了,并没有去重新请求页面的变化,只有刷新页面后才会去请求当前id的数据,其实也是可以理解的, 对比一下这两个路由 只是后面路由的参数变了,但是组件并没有销毁在创建,你也可以理解为,当你手动在...
  • 关于vue页面缓存

    千次阅读 2020-12-20 10:58:59
    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染。用法:运行结果描述:input输入框内,路由切换输入框内部的内容...结合router缓存部分页面:比较实用的例子:思路:通过before...
  • VUE清除keepalive页面缓存

    千次阅读 2020-12-20 10:58:56
    代码如下:(代码说明:store.state.pages是我存储标签页的列表,记录了当前打开的标签页的路由数据)旧的方法://使用Vue.mixin的方法拦截了路由离开事件,并在该拦截方法中实现了销毁页面缓存的功能。let ...
  • 第一步 在app中设置需要缓存的div//缓存页面//不缓存页面第二步 在路由router.js中设置.vue页面是否需要缓存{path: '/',name: 'HomePage',component: HomePage,meta: {keepAlive: false, //此组件不需要被缓存is...
  • 页面通过路由调转后,新页面停留的位置与上一级页面一致 解决 配置路由 const router = new VueRouter({ scrollBehavior: () => ({ y: 0 }), routes: [...] }) // 可能是使用组件缓存时 再次切换到...
  • 利用keep-alive 缓存需要缓存页面
  • VUE实现页面缓存

    2021-10-27 09:08:42
    主要利用keep-alive实现从列表页跳转到详情页,然后点击返回时,页面缓存不用重新请求资源。 一、在router里配置路由 import Vue from "vue"; import Router from "vue-router"; // 避免到当前位置的冗余导航 const...
  • 【前端】VUE路由缓存

    2021-08-19 19:48:25
    缓存单个指定路由 <keep-alive include="该路由的name名称"> <router-view></router-view> </keep-alive> 缓存多个指定路由 <keep-alive> <router-vi...
  • 注意一、组件使用<keep-alive>标签包裹或者在router里的meta设置keepAlive为true,否则activated不生效。...这样的话,我们就需要缓存A页面,然后B页面返回时,A页面只执行activated,不会执行create

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,477
精华内容 8,590
关键字:

vue路由缓存页面

vue 订阅