大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
Vue刷新页面重新加载
问题描述
在加载同一路由页面的时候，vue的页面默认是不刷新的，需要重新加载数据
解决方案
- 修改App.vue
在路由视图上添加一个变量isRouterAlive判断显示实现重新加载
<template>
<!-- <router-view/> -->
<router-view v-if="isRouterAlive"/>
</template>
<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>
-
在需要刷新的页面修改代码
主要是添加
inject: ['reload']然后在需要刷新的地方调用this.reload()需要注意的地方是当心死循环。
<script>
import request from "@/utils/request.js";
export default {
name:'RightPane',
inject: ['reload'],
data(){
return {
newest_datas: {},
};
},
methods:{
// 显示明细
showDetail(val){
//this.$router.push 传参
this.$router.push({path:'/showDetail',query:{id:val}});
this.reload()
}
},
created(){
//加载数据，显示最新的10条数据
request.get('/information?currentPage=1&pageSize=10')
.then((res) => {
this.newest_datas = res.data.data.records
}).catch((err) => {
this.$message({type: "error",message: "加载数据出错:"+err, })
});
}
}
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/181160.html原文链接：https://javaforall.net
