vue项目中，新增或编辑后返回列表页，数据不刷新问题

最新推荐文章于 2023-11-27 16:49:55 发布
原创 最新推荐文章于 2023-11-27 16:49:55 发布 · 3.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue项目中返回父路由不刷新 #新增返回列表页，数据不刷新 #编辑返回列表页，数据不刷新

在Vue项目中，当从新增或编辑页面返回列表页时，经常遇到列表数据未能自动刷新的问题。这个问题通常发生在二级路由的场景下。为解决此问题，可以在父路由中定义一个方法，并传递给子路由。在子路由完成新增或编辑操作后，调用这个方法来触发列表数据的更新，从而实现页面的刷新。

场景：
新增编辑页是列表页的二级路由
在新增或编辑后列表页不刷新相应的数据

在父路由中：加一个@refresh="getKnowledgeList",自定义方法，传到子路由上，其中绑定的方法为获取列表页的数据方法

<template>
  <router-view v-if="hidden" :key="key" @refresh="getKnowledgeList"></router-view>
  <
最低0.47元/天 解锁文章
关于Vue 编辑/保存后，页面数据不更新的问题
News777的博客
06-10 2099
编辑页面采用Element UI 的el-dialog 组件封装起来，点击修改按钮后异步调用接口，完成后用$emit 让父组件重新调用查询数据接口
vue之列表页进入刷新，返回不刷新以及按需刷新的设计思路和实现方式
最新发布
yige001的博客
08-08 1020
列表页进入刷新，返回不刷新以及按需刷新
VUE项目（单页面）问题之：从详情页返回列表页时返回到上次滚动位置，并还原列表页所有点击、搜索等状态
killbee365的博客
07-28 1839
一、问题 新增需求，点击浏览器返回按钮或者详情页的返回按钮，需要返回列表页，并保存之前所有的状态。 二、经过 刚开始，用 this.$router.push({ name: 'detailsPage', params: sendData // sendData是给详情页传的数据信息 }) 详情页通过 this.$route.params 信息判断是哪个列表页传过来的，并给二级页面传所需的信息。 为了防止页面刷新，路由中的信息为空，还用sessionstorage存储了路由信息。 后来，发现
vue 页面跳转记录位置返回在原来滚动的位置
至_臻的博客
07-01 2974
第一步：在router文件里面的index.js写入 { path: '/carsList', name: 'CarsList', //汽车列表 component: () => import(/* webpackChunkName: "about" */ '../views/CarsList.vue'), meta: { keepAlive: true //需要缓存 } } 上面是跳转路由，主要是在里面添加meta 第二步：还是在
vue新增修改完成后页面不刷新问题
weixin_42277719的博客
09-17 1617
vue新增修改完成后页面不刷新问题 这是一开始使用的方法 /*submitReject () { if (!this.verify()) { return false } if (this.rewData.id && !this.readonly) { console.log("修改") update(this.addForm).then(res => {
vue项目如何刷新当前页面的方法
08-27
在 Vue 项目中，刷新当前页面是非常常见的需求，例如在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。本文将介绍 Vue 项目如何刷新当前页面的方法。 问题描述 在 Vue 项目中，刷新...
vue数据更新但是界面却不刷新
05-04
总结来说，Vue的数据更新与视图刷新不一致主要源于数据响应性问题、异步操作、错误的数据绑定以及数组操作。通过理解Vue的工作原理和使用适当的解决策略，我们可以有效地解决这类问题，确保界面与数据的同步。在实际...
vue缓存的keepalive页面刷新数据的方法
12-03
总结起来，解决Vue中缓存页面（如`keep-alive`）的数据刷新问题，关键在于利用`activated`生命周期钩子来处理数据接收，并借助`Vue.set()`方法确保对已缓存数组的修改能够正确反映在视图上。同时，通过自定义事件...
vue2 elementui 后台新增完后返回列表页刷新页面
06-13
在Vue.js 2和Element UI中，可以使用路由导航和事件总线来实现新增后返回列表页并刷新页面的效果。 1. 在路由导航中定义列表页的路由 首先，在路由配置中定义列表页的路由，例如： ```javascript const router = ...
解决vue列表页跳转到详情页，返回列表页时不刷新、保持原来的状态的方法
k0933的博客
11-27 6876
先判断isBack的状态，如果为false,则说明当前不是从详情页进来的（可能从其他菜单或则编辑页进入，需要更新数据），就更新列表数据（自己的列表数据逻辑，并将分页设为1），之后将isBack设置为false。1、列表页进入详情页，再从详情页返回时，列表页不刷新，比如列表当前分页为第二页，点击进入详情页，再从点击返回按钮，返回到列表页时，列表页保持在第二页。2、列表页进入编辑页，再从编辑页返回时，列表页刷新。3、从其他菜单进入列表页时，列表页刷新。
vue页面详情页返回列表页_vue列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来的状态...
weixin_39626927的博客
12-19 3611
第一步，在App.vue文件下加入keep-alive刚开始我也是看的网上但是大多数是这样的一开始我也是按照这样来的后面发现从列表页跳转到列表详情页的时候再返回第一次是没问题的，但是你点击其他列表跳到详情页的时候，详情页面还是前面的那个详情页面，从列表页传来的参数也没变化，后面就把下面那个判断删除才可以了，所以这里看自己项目需求第二步 在路由文件中 ：router/index.js，给被要被缓存的...
VUE----列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来的状态 && 跳转详情页路由缓存问题
heavenz19的博客
11-30 3274
VUE----列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来的状态 <div id="app"> <!-- 可以被缓存的视图组件 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 不可以被缓存的视图组件 --> <ro
Vue刷新页面方式详解
m0_47195133的博客
04-17 2052
业务需求/问题描述 在项目中经常遇到一个问题，例如新增完表单数据和需要重新刷新页面。类似的业务还有很多。这时我们可以考虑的方式如下 ①（推荐）v-if刷新页面，并依赖注入 （不太清楚的小伙伴可以看我之前的文章） //父组件 <子组件 v-if='load'> export default{ data(){ load = true }, methods:{ refresh(){ this.load = false this.$nextTick(()=>{ t
vue项目中编辑、新建、删除、查找或者其他的操作成功后如何让其页面自动刷新
qq_66180056的博客
07-12 3572
vue项目中编辑、新建、删除、查找或者其他的操作成功后如何让其页面自动刷新
vue3新增列表，跳转路由列表不刷新问题
m0_73504190的博客
05-12 1119
情景：在列表页点击新增，通过路由跳转到另一个页面，提交数据后返回列表页，刷新页面。问题：因为vue单页面应用的特点，有缓存，所以不会自动刷新。
vue中修改数据页面不更新的原因和解决方案
weixin_50539470的博客
05-06 1232
原因 在vue2中通过Object.defineProperty实现数据响应式，组件初始化时，对data中的item进行递归遍历，对item的每一个属性进行劫持，添加set,get方法。后来新加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会视图更新。 如何解决 Vue.set() Vue.set( target, propertyName/index, value ) 参数： target：要修改的对象或数组 pro...
VUE-从添加界面返回原页面时，新增数据自动刷新，使用监听路由来实现监听缓存数据
LzzMandy的博客
07-23 2733
功能简介： 1、主页面路径mainpage、添加界面路径addpage 2、默认显示全部tab，只有一个添加按钮 3、点击添加按钮，跳转到添加界面，添加新数据后，返回原界面，新添加的数据即时显示出来 关键点： 1、利用缓存存储新添加数据的创建时间、专家类型 2、当路由变化时，判断缓存数据是否变化，变化则触发下拉刷新事件；否则，不进行任何操作 实现步骤： 1、在添加界面，点击提交按...
vue页面详情页返回列表页_vue 详情页返回列表页，保留列表页之前的筛选条件...
weixin_39946313的博客
12-19 1138
需求背景再列表页进行一系列的筛选条件之后，点击某一个进入详情页，当从详情页返回列表页的时候，需要保留之前的筛选条件。之前的实现方法路由跳转的时候，把筛选条件json对象放到query中去，传到详情页，返回的时候再带回来，会导致在url后面一直会有这么一堆东西新的实现方法：**vuex + cookie**### vuex ####state: {changeFilter: {}//变更列表筛选条件...
vue 编辑数据后返回列表页，停留在当前页码，并刷新数据
qq_35867245的博客
04-24 3253
1.停留在当前页码 在项目的入口文件（我这里是App.vue）添加<keep-alive></keep-alive>标签开启缓存， 代码如下： <template> <div id="app"> <transition name="fade"> <keep-alive> <router-view v-if=...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值