vue中按钮操作完刷新页面的实现

目录
  • vue按钮操作完刷新页面
    • 1.父组件中实现
    • 2.子组件绑定
  • 点击按钮后自动刷新页面

vue按钮操作完刷新页面

首先从子组件和父组件角度去写这个东西，简言之就是在父组件中实现这个刷新功能方法，然后在子组件中进行绑定并进行监听就好了啊

1.父组件中实现

① 图示部分：

个人建议这个作为父组件，肯定一般是放在列表中的，即把列表页面作为父组件的归属地

② 代码部分：

method方法中部分

refresh () {
   this.reload()
 }

将reload进行注入

inject: ['reload'],

2.子组件绑定

① 子组件进行绑定

在父组件中引用子组件页面的地方进行绑定

如图：

绑定脚本：

@refresh="refresh"

② 单独去子组件页面处理成功的地方去监听

图示：比如就以这个页面为例子

进入子页面：

在子页面组件中处理成功后进行监听父组件中刷新方法，以上设置完就ok了

点击按钮后自动刷新页面

在按钮点击事件中添加

window.location.reload();

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue几种主动刷新的方法总结

    当我们在做项目时,我们需要做当前页面的刷新来达到数据更新的目的,在此我们大概总结了几种常用的页面刷新的方法. 1.window.location.reload(),是原生JS提供的方法,this.$router.go(0):是vue路由里面的一种方法,这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入. 2.通过路由跳转的方法刷新,具体思路是点击按钮跳转一个空白页,然后再马上跳回来: 当前页面: <template> &l

  • vue 点击按钮 路由跳转指定页面的实现方式

    vue 点击按钮 路由跳转指定页面的实现方式

    目录 点击按钮 路由跳转指定页面 最终效果 vue跳转页面常用的方式 1:router-link跳转 2:this.$router.push() 3.this.$router.replace() 4.this.$router.go(n) ps : 区别 点击按钮 路由跳转指定页面 最终效果 点击指定按钮,跳转指定 /login 页面 代码: <button @click="gotolink" class="btn btn-success">点击跳转页面&

  • vue点击按钮实现简单页面的切换

    本文实例为大家分享了vue点击按钮实现页面切换的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8">

  • vue中实现页面刷新以及局部刷新的方法

    vue中实现页面刷新以及局部刷新的方法

    目录 一.全页面刷新 二.局部刷新 三.应用场景 总结 一.全页面刷新 1.修改 App.vue,代码如下: <template> <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', provide() { // 父组件中返回要传

  • vue中按钮操作完刷新页面的实现

    vue中按钮操作完刷新页面的实现

    目录 vue按钮操作完刷新页面 1.父组件中实现 2.子组件绑定 点击按钮后自动刷新页面 vue按钮操作完刷新页面 首先从子组件和父组件角度去写这个东西,简言之就是在父组件中实现这个刷新功能方法,然后在子组件中进行绑定并进行监听就好了啊 1.父组件中实现 ① 图示部分: 个人建议这个作为父组件,肯定一般是放在列表中的,即把列表页面作为父组件的归属地 ② 代码部分: method方法中部分 refresh () { this.reload() } 将reload进行注入 inject: ['rel

  • vue实现在进行增删改操作后刷新页面

    问题 通常在后台管理项目中,对数据进行增删改查是常规操作.在进行这些操作后,需要手动刷新才能更新列表.本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据. 解决方案 || 以删除为例: 1.强制刷新:this.$forceUpdate() 2.使用window.reload( ) 或 router.go(0),但会使整个浏览器进行重载,页面闪烁. 3.重新调用接口:但性能较差,代码冗长. 4.provide / inject :(推荐) 点此查看VUE官方解释: 允许一个祖先组

  • 在vue中实现某一些路由页面隐藏导航栏的功能操作

    为了将导航栏显示在每一个页面中,可以将导航栏与<router-view>放在同一级显示,如下: <header> ... </header> <router-view></router-view> 但是,在某些时候,我们需要隐藏导航栏显示,比如登录界面,为了实现导航栏的隐藏,可以使用如下代码: <header v-show="$route.name!=='login'"> ... </header> &

  • vue中modal传输数据并刷新部分页面数据方式

    目录 modal传输数据刷新部分页面数据 vue中modal数据管理 完全不封装的Modal代码示例 将Modal及其数据封装成组件 将Modal数据进行完全封装 modal传输数据刷新部分页面数据 在modal中传入数据至页面,并且页面刷新. 我在网上看到了 vue的几种页面传值方式 下面展示一些 内联代码片 //$ router this.$router.push({ query: { ids: record.id } }) 这种方式会刷新整个页面 // router-link <route

  • Vue使用三种方法刷新页面

    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面.如:用户登录成功.增加.删除.更新等. 原始方法: location.reload(); vue自带的路由跳转: this.$router.go(0); 用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好. 所以,我们选择第三种方式: 首先在App里面写下如下代码: <template> <div id="app"> <rout

  • 关于Vue 消除Token过期时刷新页面的重复提示问题

    token过期时,刷新页面,页面如果加载时向后端发起多个请求,会重复告警提示,经过处理,只提示一次告警. 1.问题现象   页面长时间未操作,再刷新页面时,第一次弹出"token失效,请重新登录!"提示,然后跳转到登录页面,接下来又弹出了n个"Token已过期"的后端返回消息提示. 2.原因分析   当前页面初始化,有多个向后端查询系统参数的调用,代码如下: created () { // ======================================

  • Vue中在新窗口打开页面及Vue-router的使用

    背景 在开发提分加项目的过程中,遇到了点击下拉菜单时在新窗口中打开页面,由于之前一直做的是单页面应用,没有碰到过类似的需求,于是上网搜了一下解决办法,也再次系统地温习了一下vue-router. 解决 使用路由对象的resolve方法解析路由,可以得到location.router.href等目标路由的信息.得到href就可以使用window.open开新窗口了. const {href} = this.$router.resolve({ name: "statistics-explain&qu

  • vue中使用[provide/inject]实现页面reload的方法

    在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject]实现刷新 该方法t简单的来说就是在父组件中 1.设置provider 2.然后在子组件中通过inject调用 3.在需要执行的地方直接调用方法即可 总结 以上所述是小编给大家介绍的vue中使用[provide/inject]实现页面reload的方法,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 如何处理vue router 路由传参刷新页面参数丢失

    如何处理vue router 路由传参刷新页面参数丢失

    概述 常见场景:点击列表的详情,跳转到详情内页,在内页根据传递的参数获取详情数据. 路由传参一般有如下几种方式,下面主要介编程式导航 router.push 的传参方式: 方法一:通过 params 传参 路由配置如下: { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { thi

  • 解决Vue @submit 提交后不刷新页面问题

    我就废话不多说了,大家还是直接看代码吧~ <form @submit="add"> <!-- 表单 --> </form> add: function(e){ // 阻止页面刷新 e.preventDefault(); // 逻辑代码 }, 补充知识:@submit.prevent阻止默认事件提交 例如: 以上这篇解决Vue @submit 提交后不刷新页面问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐