vue 重新加载页面_页面重新加载
Vue 页面 加载 重新
2023-06-13 09:14:32 时间
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.cn/181160.html原文链接:https://javaforall.cn
相关文章
- Vue中显示img图片,显示不出来怎么办?vue显示图片
- vue项目如何刷新当前页面「建议收藏」
- 基于vue的简单轻便的开源图片预览组件
- vue插槽slot-scope_slot插槽的使用方法
- vue md5.js_VUE.js
- Vue transition动画
- Vue响应式依赖收集原理分析-vue高级必备
- vue和jQuery一起使用「建议收藏」
- Vue生成二维码_vue视频软件怎么生成二维码
- vue 模块化开发
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- Vue style里面使用@import引入外部css, 作用域是全局的解决方案
- java和vue视频点播系统视频弹幕系统
- 安装Vue on Linux:轻松搭建开发环境(linux安装vue)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- Vue调用Redis体验更好的开发效率(vue能调redis吗)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)
- 使用Vue从Redis获取数据(vue去redis取数据)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)