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的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现. 第一 ...
随机推荐
- java调用删除文件的方法删除文件,却删除不干净
场景: 程序中在做数据下载时,生成了一个临时文件夹.夹子里面有一些txt和其他格式文件. 数据下载完毕后,需要删除这个临时文件夹,但是一直删除不干净,总会有一下文件残留. 网搜到了这个问题的原因: 内 ...
- [Android] 基于 Linux 命令行构建 Android 应用(六):Android 应用签名
Android 要求所有应用在安装前必须使用证书进行数字签名.Android 使用该证书来确定一个应用以及其作者身份,该证书不要求由证书发行机构颁发,因此 Android 应用经常使用自我签名的证书, ...
- java连接数据库的基本操作
ResultSet保存查询的table数据,就像mysql的客户端显示的查询类容,但这中间还是藏有很多信息.
- CentOS开机自启动/etc/rc.local不执行的解决办法
放置在开机自启动里面没有自动启动 查看文件/etc/rc.local发现是一个软连接 修改源文件的执行权限即可 chmod 755 /etc/rc.d/rc.local 查看日志可以看到开机自启动过程 ...
- Hyper-V 与 VMware 和 vbox 的不兼容
新装的win10 开始先装到docker 装之前必须要装Hyper-V 后来装vbox 并且安装了Centos7系统也用得起,后来不知道怎么win10好像升级了.再启动vbox 开启centos7就报 ...
- slam course
视频地址:https://www.youtube.com/watch?v=wVsfCnyt5jA 课程网站:http://ais.informatik.uni-freiburg.de/teaching ...
- Exception 02 : java.lang.ClassNotFoundException: Could not load requested class : com.mysql.jdbc.Driver
异常名称 java.lang.ClassNotFoundException: Could not load requested class : com.mysql.jdbc.Driver 异常详细信息 ...
- 字母算术的python算法
据说Google出过一道题目:WWWDOT – GOOGLE = DOTCOM. 其中每个字母代表一个数字,数字不能重复,而且最高位的数字不能为0. 像这样的谜题被称为cryptarithms或者字母 ...
- day0315 迭代器
一. 迭代器 1.什么是可迭代器? 除了数字和布尔值之外,其他数据类型都是可迭代对象.(字符串,列表,元组,字典,集合) 2.可迭代协议 2.1 可以被迭代要满足的要求就叫可迭代协议,可迭代的定义非常 ...
- Dom4j中getStringValue()和getText()用法的区别
这两个方法都是获取文本的,区别是: getText()-----获取当前节点的文本内容,如果当前节点下是一个element元素,那返回的就是null. getStringValue------获取当前 ...