关于Vue 刷新页面
前言
Vue 中是单页面,当然需要刷新数据咯
你一定遇到这样的需求::比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者
这个页面有个组件 ,但是这个组件里面的点击事件还是到当前页面
怎么就解决
1.在使用Vue-router做项目时,会遇到如/serviceId/:id
这样只改变id
号的场景。由于router-view是复用的,单纯的改变id
号并不会刷新router-view,而这并不是我们所期望的结果。
2.我们可以在点击事件上 window.reload(),或者router.go(0)刷新时,强制刷新整个页面。整个浏览器进行了重新加载,闪烁,体验不好
3.使用watch的方法,具体的可以看一下官方文档
watch: {
'$route': function (to, from) {
this.$store.dispatch('updateActiveTemplateId',
this.$route.params.templateId) // 通过更新Vuex中的store的数据,让数据发生变化
this.getTemplateById()
} }
当然我也看过一些博客,总结了下 如何更好的解决
provide / inject 组合
provide / inject 组合
作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
在你的App.vue页面里面
声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载
然后在你的详情页面
tableList.vue:
在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加...),直接this.reload()调用,即可刷新当前页面。
解释下:
provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名
提示:provide
和 inject
绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
当然你不能 是在created里调用getData(), 在getData里又调用了this.reload().
这样会导致死循环的 ,所以要合理的运用就这个方法
关于Vue 刷新页面的更多相关文章
- Vue刷新页面VueX中数据清空了,怎么重新获取?
Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...
- 解决vue刷新页面以后丢失store的数据
刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage.sessionStorage.cookie中,localStorage是永久储存,重新 ...
- Vue刷新页面的三种方式
我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面 1.原始方法: location.reload(); 2.vue自带的路由跳转: this.$ ...
- 解决 Vue 刷新页面后 store 数据丢失的问题
原来的状态(页面刷新数据会重置) state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } }, ...
- vue刷新页面出现闪烁
在容器里添加v-cloak <div class="box" id="call-no-list" v-cloak></div> 然后在c ...
- ant design for vue 刷新页面,根据当前路由选中相应菜单
<a-menu theme="dark" mode="horizontal" class="menu__a" @select=&quo ...
- [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- vue单页面应用刷新网页后vuex的state数据丢失的解决方案
1. 产生原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值. 2. 解决思路一种是state里的数据全部是通过请求 ...
- Vue 刷新当前页面,并重新加载页面数据
业务场景:在管理后台,在执行完,增,删,改,操作的时候.我们需要刷新一下页面,重载数据.在JQ中我们会用到location.reload()方法,刷新页面:在vue中,这里需要用到一个 provide ...
随机推荐
- Linq之旅:Linq入门详解(Linq to Objects)(转)
http://www.cnblogs.com/heyuquan/p/Linq-to-Objects.html 示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细 ...
- Java程序设计——不一样的开始 IP地址判定
不一样的开始 其实,写报告,很烦人,但是着实很有用. 报告不但是自己复习回顾的数据库,还是团队合作,技术提高的加速器,认真对待报告,认真对待自己的行业,把他看作自己安身立命的对象. IP地址判定 [问 ...
- 【BW系列】SAP BW on HANA 迁移问题
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[BW系列]SAP BW on HANA 迁移问 ...
- django.db.migrations.exceptions.BadMigrationError: Migration tests in app bl
这个错误基本上都是 替换文件后才会出现的问题 因为你替换后他的日志文件没有完全替换的话,那么日志对应不到就会出现这样的问题, 一个模糊的处理办法:重新进行数据迁移:首先删除migrations中除去_ ...
- mysql中基本的语句
操作字段: 添加字段 ALTER TABLE 表名 ADD 字段 varchar(20) COMMENT '别名'; 修改表字段的属性等(除了修改表名称) ALTER TABLE 表名 MODIFY ...
- 执行python程序 出现三部曲
1.执行一个python程序 ,会产生一个进程 ,然后会在内存生成一份内存空间 先把python解释器代码加载到内存里, python解释器代码就是C语言代码 2. 然后再把 自己写的python文件 ...
- Java学习开发第三阶段总结
第三阶段的学习总结: 在这次学习我学习了面向对象和封装的知识. ①类的定义 package day01; public class student { //成员变量 String name; //姓名 ...
- [转帖]数据库默认驱动、URL、端口
超详细的各种数据库默认驱动.URL.端口总结 http://database.51cto.com/art/201906/598043.htm 学习了解一下. 概述 今天主要对各种数据库默认端口和UR ...
- 将ShellCode注入进程内存
内存注入ShellCode的优势就在于被发现的概率极低,甚至可以被忽略,这是因为ShellCode被注入到进程内存中时,其并没有与之对应的硬盘文件,从而难以在磁盘中取证,但也存在一个弊端由于内存是易失 ...
- RS chap1:好的推荐系统
一.什么是推荐系统 1.个性化推荐系统:从庞大的电影库中找几部符合你兴趣的电影供你选择. 2.推荐系统是帮助用户快速发现有用信息的工具.和搜索引擎不同的是,推荐系统不需要用户提供明确的需求,而是通过分 ...