精华内容
下载资源
问答
  • 在一个地方填了一个申请的表单,需要在另一个页面的列表上显示出来这条申请的数据,但是由于vue缓存,在切换路由时列表上并没有及时更新数据,解决方法如下: vue路由切换时页面内容没有重新加载 关于vue2.0路由...

    项目中遇到这样一个问题:

    在一个地方填了一个申请的表单,需要在另一个页面的列表上显示出来这条申请的数据,但是由于vue的缓存,在切换路由时列表上并没有及时更新数据,解决方法如下:

    vue路由切换时页面内容没有重新加载

    关于vue2.0路由开启keep-alive时需要注意的地方

    把mounted()改成activated()就行了。(activated用于初始化页面数据等)

    转载于:https://www.cnblogs.com/knuzy/p/9783535.html

    展开全文
  • 晚上好呀。今天做项目自己给自己测试,发现当我们在不同的网页使用同一份数据的时候,由于使用组件,数据被自动缓存了,所以导致点击下一个相关页面的时候虽然页面刷新了但是后台数据没有刷新的问题。

    写在前面

            晚上好呀。今天做项目自己给自己测试,发现当我们在不同的网页使用同一份数据的时候,由于使用<keep-alive>组件,数据被自动缓存了,所以导致点击下一个相关页面的时候虽然页面刷新了但是后台数据没有刷新的问题。

    问题

            如下图所示,

            由地址栏可知,左边的数据是从另一个页面跳转而来,获取的是传了指定的id所得来数据,当我们点击左侧标签想获取全部数据的时候页面虽然刷新了但是数据依然是上个页面的。

    解决方案

             我们需要使用watch侦听器侦听路由的变化,监测到变化后使页面重新向后台发送请求获取数据。

            注意:向后台重新发送数据时要把从上个页面带的指定id的参数去掉才可以拿到新的数据。

            解决方案如以下代码:

    watch: {
        $route (to, from) {
          console.log(to, from)
          this.渲染数据的函数()
        }
      },

           我们需要用浅拷贝的数据向后台发送请求,否则获取的还是带id发送后返回的数据,数据还是不会更新,因为data的数据已经被更改了(如果还是不明白,欢迎评论区向我咨询):

          let res = {}
    
          if (this.$route.query.id) {
            //将路由传过来的id赋给要传的参数id
            xxx.yyy = this.$route.query.id
            res = await api接口({...xxx})
          } else {
            res = await api接口(xxx)
          }

    完成后的理想效果

     

    写在最后

            以上就是今天的所有内容啦,进步从解决一个又一个小bug开始~

    展开全文
  • 文章目录需求说明分析及解决路由缓存页面组件刷新 需求说明 1、部分路由需要做缓存 2、单页面中部分组件需要重新渲染,比如:对表格进行新增、删除、修改等之后需要刷新页面中的部分组件 keep-alive <keep-alive...

    需求说明

    1、部分路由需要做缓存
    2、单页面中部分组件需要重新渲染,比如:对表格进行新增、删除、修改等之后需要刷新页面中的部分组件

    keep-alive
    <keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

    分析及解决

    路由缓存

    由于只缓存部分页面,

    <template>
      <div id="app">
      <!--此处省略若干代码-->
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </template>
    

    这种将<router-view>全部缓存的方式不可行,需要加一些判断来实现。

    <template>
      <div id="app">
        <!--此处省略若干代码-->
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </template>
    

    再配合在路由定义中加入:

    meta: {keepAlive: true}
    

    这样就可以实现只缓存路由keepAlive设置为true的路由;
    值得注意的是:

    !!!建议在App.vue中就设置<keep-alive>,而且如果想要缓存的路由是某个父路由的子路由,这个父路由是不用使用<keep-alive>的,直接使用<router-view>就行了,否则会造成缓存的混乱。

    页面组件刷新

    通常手动刷新组件就是使用$nextTick()进行,如:

    <template>
      <div>
        <div v-if="testComponentVisible"></div>
      </div>
    </template>
    
    data(){
        return {
           testComponentVisible: true,
        }
      },
      methods: {
        closeComponent() {
    			this.testComponentVisible = false;
    			this.$nextTick(()=> {
    				this.testComponentVisible = true;
    			})
    		}
      },
    

    但是如果组件刷新的情况变得很多之后就会重复多次定义上面的代码,如何一劳永逸呢?
    具体做法是:
    App.vue中定义一个全局使用,

    <template>
      <div id="app">
        <!--此处省略若干代码-->
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive && isRouterAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive && isRouterAlive"></router-view>
      </div>
    </template>
    
    provide() {
        return {
          reload: this.reload,
        };
      },
      data() {
        return {
          isRouterAlive: true
        };
      },
      methods: {
        reload() {
          console.log('启动');
          this.isRouterAlive = false;
          this.$nextTick(function () {
            this.isRouterAlive = true;
          });
        },
      },
    

    provide由于是在App.vue中定义所以是可以给到所有的组件之间获取的。
    在子组件中使用inject: ['reload'],就可以获取;
    比如子组件<my-test-component>

    <my-test-component @reload="reload"></my-test-component>
    

    子组件里面只需要在完成对表格进行新增、删除、修改等之后

    this.$emit("reload")
    

    这样就可以刷新组件了。

    展开全文
  • 在一个大的父组件中,根据tab页面的v-if进行切面的切换,但是v-if的切换会造成组件的销毁,再切换回去输入的数据或者上传的文件就没有了,所以切换页面不能让tab页面的子组件销毁。 解决: 在子组件的外边包上一...

    功能描述:

          在一个大的父组件中,根据tab页面的v-if进行切面的切换,但是v-if的切换会造成组件的销毁,再切换回去输入的数据或者上传的文件就没有了,所以切换页面不能让tab页面的子组件销毁。

    解决:

          在子组件的外边包上一个<keep-alive></keep-alive>的标签;

    如果是路由的方式,那么就在<router-view>外边包上<keep-alive>

    或者是在定义路由组件的时候在routes[]里边的元数据meta中定义。

    routes:[{
            path: '/home',
            component: Home,
            meta: {
                title:'测试tab页面切换的缓存问题',
                keepAlive: true 
               }
            }]
    

     

    展开全文
  • 下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 使用路由的keepAlive方法,keepAlive为true就会保留页面缓存。(返回该页面不会执行created和mounted)。在activated恢复页面滚动高度。 工具: 移动端。使用到vant的van-pull-refresh 解决方法: 1.router.js把a页面...
  • 背景:想弄一个路由跳转时,保留当前页面数据,不然每次跳转回来后,就要重新写一遍,太麻烦了。 发现vue的标签,与标签搭配使用,可以达到目的。 //在.vue文件中,使用<keep-alive>标签包裹<router-view&...
  • vue 切换路由后, 保存原页面 输入框 内容 (亲测可用!!!) 需求: 在输入框输入信息后, 跳转其它路由再切换回来, 仍可以看到刚刚输入的内容 提需求前 : 样图 : 路由 routes.js 文件 : 路由出口 index.vue 文件 :...
  • 参考文章:Vue切换页面时的过渡动画_zhangxu0215的专栏-CSDN博客 根据此作者写的文章修改了一些样式符合我的系统搞定了过度动画,但是会出现一些动画左右错乱的现象,原因是因为meta.index大小不一,所以应该自行...
  • 为了使切换页面时编辑的数据仍然保留,所以对页面做了缓存页面路由的keepAlive:true)。但是路由参数有变化时页面用的仍然是缓存数据并没有刷新。 所以监听路由参数id,有变化则重新获取数据 watch: { $...
  • 第二次进入页面页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-alive>包裹动态组件时,会缓存不活动的...
  • 本事增加了路由缓存,我想切换页面的时候iframe里面的数据不变
  • 1.1 默认情况下, 被切换路由组件对象会死亡释放, 再次回来时是重新创建的 1.2 如果可以缓存路由组件对象, 可以提高用户体验 2. 编码实现 <keep-alive> <router-view></router-view> </keep-...
  • 在项目中出现的情况是路由变化后,url变化了,但是页面没有刷新,手动刷新一下才出现应有的画面。 情况一: 在 github 的 vue-router 中找到同样的一个问题:3.0.1版本通过router实例无法跳转 昨天发现有些路由不能...
  • Vue 路由切换页面刷新页面

    千次阅读 2019-11-28 19:55:32
    第二次进入页面页面路由参数已经改变,但是页面内容不会刷新。 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用。后来发现App.vue中使用了<keep-alive>: <template&...
  • 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后到底是如何执行代码实现路由切换的?...
  • 配合vue-router,可以配置meta中的keep-alive解决这个问题: 在vue-router的配置中,添加(keepAlive: true) { path: '/HelloWorld', name: 'HelloWorld', component: HelloWorld, meta: { requireAuth: ...
  • vue 快速配置路由动画和缓存 前言 在使用 vue 路由动画和缓存时,遇到了一些问题,比如: 正确产生动画; 有条件产生动画,比如 A 页面到 B 页面使用动画,A 到其他页面不使用动画; 有条件缓存,管理缓存 动画和...
  • 第二次进入页面页面路由参数已经改变,但是页面内容不会刷新。 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用。后来发现App.vue中使用了<keep>: <router></router> ...
  • vue 缓存路由组件

    2021-07-31 10:50:49
    只要它的router-view外面包上一个keep-alive标签 如果直接这样写表示缓存router-view里面的所有组件,也就是切换路由时组件不被销毁 写了include的话就缓存写了的组件,注意这边写的是组件名 ...
  • 为了组件间相互切换不会重复加载数据,影响用户体验,我们通常需要将组件的数组实现缓存。这也是vue组件优化的一个重要方法 首先看一下路由部分的写法: App.vue 组件写法 desc: 部分路由缓存;如果想全部...
  • 这篇文章主要为大家详细介绍了Vue动态路由缓存不相互影响的解决办法,具有一定的参考价值,可以用来参考一下。感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!关于react与vue中的key之前在学习react的...
  • 使用vue切换页面的时候,发现右侧的滚动条的位置似乎存在缓存似的,当右侧滚动条默认在顶部,切换页面的时候,位置停留在顶部,但当右侧滚动条的停留位置不是在顶部的时候,右侧滚动条停留的位置就会是上一个页面...
  • Vue 缓存路由组件

    2019-10-08 23:09:19
    Vue 缓存路由组件 只需加入 <keep-alive> <router-view></router-view> </keep-alive> 点击about 并且输入 点击home切换回来 然后再点击about切换回来 内容还在 当我们在切换到home...
  • vue页面跳转实现页面缓存

    千次阅读 2020-04-23 16:09:06
    路由里面设置需要缓存页面 第二步 使用keep-alive属性包裹需要缓存页面使用v-if判断,为true的是需要缓存的,false是不需要缓存的 第三步在需要缓存页面设置导航钩子,在A野区离开时将...
  • 相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到。如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样。 1.如何切换 使用动态组件,相信大家都能看懂(部分代码省略) //通过点击就...
  • 路由id变了,并没有去重新请求页面的变化,只有刷新页面后才会去请求当前id的数据,其实也是可以理解的, 对比一下这两个路由 只是后面路由的参数变了,但是组件并没有销毁在创建,你也可以理解为,当你手动在...

空空如也

空空如也

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

vue切换路由页面数据缓存

vue 订阅