前言

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 刷新页面的更多相关文章

  1. Vue刷新页面VueX中数据清空了,怎么重新获取?

    Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...

  2. 解决vue刷新页面以后丢失store的数据

    刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage.sessionStorage.cookie中,localStorage是永久储存,重新 ...

  3. Vue刷新页面的三种方式

    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面 1.原始方法: location.reload(); 2.vue自带的路由跳转: this.$ ...

  4. 解决 Vue 刷新页面后 store 数据丢失的问题

    原来的状态(页面刷新数据会重置) state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } },   ...

  5. vue刷新页面出现闪烁

    在容器里添加v-cloak <div class="box" id="call-no-list" v-cloak></div> 然后在c ...

  6. ant design for vue 刷新页面,根据当前路由选中相应菜单

    <a-menu theme="dark" mode="horizontal" class="menu__a" @select=&quo ...

  7. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  8. vue单页面应用刷新网页后vuex的state数据丢失的解决方案

    1. 产生原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值. 2. 解决思路一种是state里的数据全部是通过请求 ...

  9. Vue 刷新当前页面,并重新加载页面数据

    业务场景:在管理后台,在执行完,增,删,改,操作的时候.我们需要刷新一下页面,重载数据.在JQ中我们会用到location.reload()方法,刷新页面:在vue中,这里需要用到一个 provide ...

随机推荐

  1. python文档的数据读取,把读取数据写入到新的表里

    目的:接口自动化过程需要从表格文件读取,然后把结果写到表格中.没有多余内容全部是精华! 读取文件1 读取文件2 代码如下图: # -*-coding:utf-8 -*-# Author:wangjun ...

  2. Keytool生成证书

    一.生成证书keytool -genkey -alias 别名 -keyalg RSA -keysize 1024(密钥位数) -keypass 密码 -validity 365(默认90天) -ke ...

  3. oracle 11g sqlplus和plsql developer 乱码解决方案

    ----------------------------------华丽的分隔符---------------------------------- 在cmd终端下运行            中文的话 ...

  4. Flask的 sqlalchemy 操作要点

    1.filter和filter_by的区别 filter,使用复杂的过滤条件,一般用两个等号进行匹配 filter,使用简单的过滤条件,一般用一个等号进行匹配 Answer.query.filter( ...

  5. Elasticsearch-搜索并获取数据

    Elasticsearch-搜索并获取数据 在group中搜索elasticsearch curl -XGET "localhost:9200/get-together/group/_sea ...

  6. [转帖]什么是 LLVM?Swift, Rust, Clang 等语言背后的支持

    要了解用于以编程方式生成机器原生代码的编译器框架是如何让新语言的推出以及对现有的语言进行增强比以往更加容易了. https://www.oschina.net/translate/what-is-ll ...

  7. 设计模式之单例模式(Singleton Pattern)

    单例模式是最简单的设计模式之一.属于创建型模式,它提供了一种创建对象的最佳方式.使应用中只存在一个对象的实例,并且使这个单实例负责所有对该对象的调用.这种模式涉及到一个单一的类,该类负责创建自己的对象 ...

  8. 【网络安全】window 快速搭建 ftp 及 多种访问方式

    在局域网里面使用ftp传输文件比使用qq等软件传输速度快很多,但是搭建ftp很多时候需要下载相应的支持软件,其实不必下载相关的软件,因为window自带ftp功能. 演示操作系统:windows10 ...

  9. nginx服务报403错误的解决方法

    1.可能是文件权限问题,看一下网站所在的文件夹权限,用户组和用户名是否属于www:www,因为nginx.conf顶头写的是user www:www

  10. this 到底指向谁

    this 的指向,是在调用函数时根据执行上下文所动态确定的. 在函数体中,简单调用该函数时(非显式/隐式绑定下),严格模式下 this 绑定到 undefined,否则绑定到全局对象 window/g ...