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

最新推荐文章于 2023-11-27 16:49:55 发布
最新推荐文章于 2023-11-27 16:49:55 发布
阅读量3.1k 收藏 2
点赞数 2
分类专栏： vue精选 文章标签： vue项目中返回父路由不刷新 新增返回列表页，数据不刷新 编辑返回列表页，数据不刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/louting249/article/details/104700298
版权

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

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

<template>
  <router-view v-if="hidden" :key="key" @refresh="getKnowledgeList"></router-
最低0.47元/天 解锁文章
lt要努力
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 编辑数据后返回列表页，停留在当前页码，并刷新数据
qq_35867245的博客
04-24 2993
1.停留在当前页码 在项目的入口文件（我这里是App.vue）添加<keep-alive></keep-alive>标签开启缓存， 代码如下： <template> <div id="app"> <transition name="fade"> <keep-alive> <router-view v-if=...
vue移动端 回退列表页不刷新
weixin_42260396的博客
11-04 1030
在移动端开发的过程中经常会遇到从详情页回退到列表页后页面重新刷新问题，这里给大家介绍一种常用的决绝方式： 第一步：在router/index中 将你不想让它刷新的页面加上以下代码： { path: '/qryBillDetail', name: 'QryBillDetail', component: QryBillDetai...
VUE-从添加界面返回原页面时，新增数据自动刷新，使用监听路由来实现监听缓存数据
LzzMandy的博客
07-23 2574
功能简介： 1、主页面路径mainpage、添加界面路径addpage 2、默认显示全部tab，只有一个添加按钮 3、点击添加按钮，跳转到添加界面，添加新数据后，返回原界面，新添加的数据即时显示出来 关键点： 1、利用缓存存储新添加数据的创建时间、专家类型 2、当路由变化时，判断缓存数据是否变化，变化则触发下拉刷新事件；否则，不进行任何操作 实现步骤： 1、在添加界面，点击提交按...
Vue列表页跳转到详情页返回，页面不刷新保持原来的状态,实现刷新局部数据
w15635748705的博客
04-16 8909
这个问题我最后还是借鉴了大佬的经验，还是大佬牛 直接上教程 首先在router.js中的列表页中添加缓存的变量： { path: '/', name: 'home', // 列表页 component: home, meta: { keepAlive: true //此页面需要缓存 } 在列表详情页中添加缓冲变量（列表详情页视图不需要缓冲的话不用添加） { path: '/notedetail', name: 'noteDetail',
Vue 详情页返回列表页，不刷新页面，并且保留列表页原来滚动条所在位置
沐枫
12-24 7296
前言： 最近公司有个移动端H5的项目，是前后端分离的，所以前端就Vue + Vux来做，项目是用vue-cli3生成的，其中就有这样的一个需求，在新闻列表页中向下滑动后，随别打开一个新闻，进入该新闻的详情页面，当看完后，从详情页返回到新闻列表页。这时，列表页重新请求接口数据，重新渲染DOM，而且滚动条也回到了最顶上的第1个新闻了。这样不仅性能不好，还会影响用户的体验效果。 问题分析： ...
vue 路由跳转 页面数据并没有更新，如何解决
weixin_61334593的博客
11-01 4612
vue 路由跳转 页面数据并没有更新，如何解决
vue主动刷新页面及列表数据删除后的刷新实例
10-18
今天小编就为大家分享一篇vue主动刷新页面及列表数据删除后的刷新实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue 路由变化页面数据不刷新的问题
08-27
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue单页使用keep-alive页面返回不刷新的问题
12-29
使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。 是Vue的内置...
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
10-15
这就是 `vue keep-alive` 在列表页缓存和详情页返回中的应用场景。 首先，我们需要了解 `vue keep-alive` 的基本用法。`keep-alive` 是一个内置组件，用于缓存 Vue 实例，避免组件的渲染和销毁过程，保持组件的状态...
解决vue刷新页面以后丢失store的数据问题
10-14
为了在刷新后恢复store的状态，我们可以利用浏览器提供的本地存储机制，如localStorage或sessionStorage。这两个API允许我们在浏览器端存储键值对数据，即使页面刷新也不会丢失。考虑到安全性与存储量，通常...
【vue】el-table 数据更新后，刷新表格数据
小墨鱼的前端问题录
08-22 4343
表格里面的数据更新后，可以通过以下方法来刷新表格。
vue 添加完数据后刷新页面_vue主动刷新页面及列表数据删除后的刷新实例
weixin_39629989的博客
12-19 895
1.场景在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。2.遇到的问题1. 用vue-router重新路由到当前页面，页面是不进行刷新的2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好3.解决方法provide / inject 组合作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深...
VUE----列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来的状态 && 跳转详情页路由缓存问题
heavenz19的博客
11-30 2953
VUE----列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来的状态 <div id="app"> <!-- 可以被缓存的视图组件 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 不可以被缓存的视图组件 --> <ro
解决vue列表页跳转到详情页，返回列表页时不刷新、保持原来的状态的方法
最新发布
k0933的博客
11-27 4731
先判断isBack的状态，如果为false,则说明当前不是从详情页进来的（可能从其他菜单或则编辑页进入，需要更新数据），就更新列表数据（自己的列表数据逻辑，并将分页设为1），之后将isBack设置为false。1、列表页进入详情页，再从详情页返回时，列表页不刷新，比如列表当前分页为第二页，点击进入详情页，再从点击返回按钮，返回到列表页时，列表页保持在第二页。2、列表页进入编辑页，再从编辑页返回时，列表页刷新。3、从其他菜单进入列表页时，列表页刷新。
Vue列表页返回时不刷新，进入详情页时在顶部
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
03-25 593
Vue列表页返回时不刷新，进入详情页时在顶部 场景 列表页时下拉加载，导致页面滚动条出现，此时如果点击某个列表进入详情页面后，详情页会固定在当前高度(scrolltop不为0)。这时通常的解决办法是在路由跳转时调用window.scrollTo(0,0); //路由跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); }); 但是此种方法是改变了window对象的scrolltop，这就导致了...
Vue刷新页面方式详解
m0_47195133的博客
04-17 1906
业务需求/问题描述 在项目中经常遇到一个问题，例如新增完表单数据和需要重新刷新页面。类似的业务还有很多。这时我们可以考虑的方式如下 ①（推荐）v-if刷新页面，并依赖注入 （不太清楚的小伙伴可以看我之前的文章） //父组件 <子组件 v-if='load'> export default{ data(){ load = true }, methods:{ refresh(){ this.load = false this.$nextTick(()=>{ t
【Vue实用功能】Vue实现tab页多页面切换
weixin_44590591的博客
05-19 8192
Vue实现tab页多页面切换 实现路由发生变化时，新增一个tab标签页，点击其他标签时切换到对应的页面，刷新网页同时保留状态 这里就直接说它实现的代码就OK！！！ VueX记录下每次新增后的tab标签页路由 store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 路由导航start // 缓存组件页面 ca
vue中列表页面跳转打开新页面，关闭新页面并刷新列表页面
MISS_zhang_0110的博客
07-25 1563
【代码】vue中列表页面跳转打开新页面，关闭新页面并刷新列表页面。
vue2 elementui 后台新增完后返回列表页刷新页面
06-13
在Vue.js 2和Element UI中，可以使用路由导航和事件总线来实现新增后返回列表页并刷新页面的效果。 1. 在路由导航中定义列表页的路由 首先，在路由配置中定义列表页的路由，例如： ```javascript const router = new VueRouter({ routes: [ { path: '/list', component: List }, { path: '/add', component: Add } ] }) ``` 其中，List为列表页的组件，Add为新增页的组件。 2. 在新增页中提交数据并触发事件 在新增页中，通过Element UI的Form组件提交新增数据，并在提交成功后触发一个自定义事件，例如： ```html <template> <el-form @submit="onSubmit"> <!-- 表单字段 --> <el-button type="primary" native-type="submit">提交</el-button> </el-form> </template> <script> export default { methods: { onSubmit() { // 提交新增数据 this.$http.post('/api/add', this.formData) .then(response => { // 触发自定义事件 this.$emit('add-success') }) } }, data() { return { formData: {} } } } </script> ``` 在提交成功后，通过`this.$emit`触发一个自定义事件`add-success`，表示新增成功。 3. 在列表页中监听自定义事件并刷新数据 在列表页中，监听新增页触发的自定义事件，并重新加载列表数据，例如： ```html <template> <div> <el-table :data="tableData"> <!-- 表头和列 --> </el-table> <el-button type="primary" @click="add">新增</el-button> </div> </template> <script> export default { mounted() { // 监听新增成功事件 this.$bus.$on('add-success', this.loadList) // 加载列表数据 this.loadList() }, beforeDestroy() { // 移除事件监听 this.$bus.$off('add-success', this.loadList) }, methods: { add() { // 跳转到新增页 this.$router.push('/add') }, loadList() { // 加载列表数据 this.$http.get('/api/list') .then(response => { this.tableData = response.data }) } }, data() { return { tableData: [] } } } </script> ``` 在列表页的`mounted`钩子函数中，通过`this.$bus.$on`监听新增成功事件`add-success`，并在回调函数中调用`loadList`方法重新加载列表数据。在`beforeDestroy`钩子函数中，通过`this.$bus.$off`移除事件监听，避免内存泄漏。 在`add`方法中，使用`this.$router.push`跳转到新增页。在新增页中提交成功后，通过`this.$emit('add-success')`触发自定义事件，列表页会收到通知并重新加载数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值