vue 刷新当前页面
情景:
- 比如在删除或者增加一条记录的时候希望当前页面可以重新刷新
- 请求接口中直接将数组结果取第0个数组或者第n个数组给变量,会报错 0 的错误,此时多次刷新即可
方法一、这种方法简单快捷,但是页面会有空白瞬间,体验不够好
this.$router.go(0);
location. reload()
_getquery(){
getquery(
{product_id: this.product_id},
{Authorization: this.access_token}
).then( (res)=>{
if(res === undefined || res === ''){
this.reload(); // this.$router.go(0)
}else{
//请求到数据
this.product_content = res.answer[0].content.body;
}
})
}
方法二、
- 在App.vue 文件中,router-view中加代码:v-if="isRouterAlive"

<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
2. 在App.vue文件中,在script中加入如下代码:

<script>
export default {
name: 'app',
provide (){
return {
reload: this.reload
}
},
data () {
return {
isRouterAlive : true
}
},
methods: {
reload () {
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true;
})
}
},
components: {
}
}
</script>
3.在需要刷新的vue页面中 注入依赖 :inject: ['reload'],

4.在需要刷新的vue页面中 调用 : this.reload();
_getquery(){
getquery(
{product_id: this.product_id},
{Authorization: this.access_token}
).then( (res)=>{
if(res === undefined || res === ''){
this.reload(); // this.$router.go(0)
}else{
//请求到数据
this.product_content = res.answer[0].content.body;
}
})
}
vue 刷新当前页面的更多相关文章
- URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新
原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...
- Vue 刷新当前页面,并重新加载页面数据
业务场景:在管理后台,在执行完,增,删,改,操作的时候.我们需要刷新一下页面,重载数据.在JQ中我们会用到location.reload()方法,刷新页面:在vue中,这里需要用到一个 provide ...
- vue刷新本页面
顶层app.vue页面 <template> <div id="app"> <router-view v-if="isRouterAlive ...
- vue刷新子页面,跳到主页,params传参引起的血案!
今天,算是真正认识了params传参,为什么说params传参引起了血案? 起因是这样的,我正在做一个登陆的模块,公司想根据url不同的参数来区分是什么类型的会议, 于是后端推荐我用params传参的 ...
- 解决:Vue刷新/载入页面,出现双括号闪现后消失
https://cn.vuejs.org/v2/api/#v-cloak v-cloak 不需要表达式 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { d ...
- vue项目如何刷新当前页面
1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...
- vue刷新路由,不刷新页面
1.路由介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来 ...
- 转:vue项目如何刷新当前页面
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://loca ...
- Vue.js刷新当前页面
Vue.js的路由跳转很强大,类似ajax的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现. 第一 ...
随机推荐
- 轮滑基础(一)(前摔,葫芦步,推步,A字转弯,弓步转弯)
轮滑新手入门推荐? [柚子陪你学轮滑轮滑教学]第一集 轮滑安全 1,站: 站立:脚可以成v字,或者平行,手放膝盖或者前伸.平行站立 膝盖相距一拳头左右,两腿间距略小于肩宽.膝盖略弯,腰下压,抬头挺胸 ...
- git 搭建本地仓库
文档 创建仓库 mkdir project cd project/ git init git remote add origin /d/project/.git // 仓库创建好了 echo hell ...
- vue 数据管道
文档https://cn.vuejs.org/v2/guide/filters.html html 片段 <div class="app"> <div>{{ ...
- git rebase 操作撤销
git rebase可以更改提交历史,在不影响别人的情况下,能够重整git树. 但如果git rebase操作失误,却在push后才发现,怎么撤销rebase操作呢? 使用git reflog + g ...
- hadoop fs 获取文件大小
du 使用方法:hadoop fs -du URI [URI …] 显示目录中所有文件的大小,或者当只指定一个文件时,显示此文件的大小.示例:hadoop fs -du /user/hadoop/di ...
- Selenium模拟浏览器抓取淘宝美食信息
前言: 无意中在网上发现了静觅大神(崔老师),又无意中发现自己硬盘里有静觅大神录制的视频,于是乎看了其中一个,可以说是非常牛逼了,让我这个用urllib,requests用了那么久的小白,体会到sel ...
- Multi-Database Transaction Demo
public ResultM UploadFile(FileInfoM pFileInfoM) { ResultM result = }; DbModel db = new DbModel(); Db ...
- bootstrapValidator多字段联合验证(如开始日期和结束日期中,开始日期不可晚于结束日期)
接触bootstrapvalidator时间不久,最近需要多个字段共同验证,网上查了一下未找到,查阅api文档,发现确实可以实现. 先看dom <div class="form-gro ...
- Warning: Failed to halt at after bootloader, forced stop at
该错误证实是因为 cc2650 SW下载模式,芯片复位引脚未接出来导致,芯片复位必须和下载器保持良好连接
- [No0000CB]如何在命令行(cmd)通过TCP/IP端口(port)查询所在的进程号(pid)或进程名称,并终止该进程
1)首先查找占用某个端口的进程PID netstat -ano | findstr [port] 2)根据该进程pid查询进程名称或标题,确认那个程序在占用该端口 tasklist /v | fi ...