vue刷新当前页面
Vue 页面 当前 刷新
2023-09-11 14:17:22 时间
https://www.jianshu.com/p/5f9db6b8914b
有时候在项目中我们需要在页面完成一些操作后,进行页面刷新.文中重点介绍provide / inject组合是vue2.2.0新增的api
解决方案以及出现的问题
1.this.$router.go(0). 通过路由跳转的方式重新渲染页面, 虽然代码量很少,便于书写和理解,但是体验很差,在刷新的一瞬间会出现白屏的现象.
2.location.reload(). 该方法只有一个参数,当值为 true 时,将强制浏览器从服务器加载页面资源,当值为 false 或者未传参时,浏览器则可能从缓存中读取页面。 缺点:该方法在跨域调用(执行该方法的脚本文件的域和 Location 对象所在页面的跨不同)时,将会抛出 DOMException 异常。并且也同样会出现页面在刷新的时候会出现白屏的现象
3.provide / inject组合
原理: 以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
提示: provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
在APP.vue中,声明reload方法,控制router-view模块的显示或者隐藏,从而控制页面的再次加
<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </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 }) } } } </script>
在需要刷新的页面,直接注入inject的reload依赖,在逻辑操作完成后需要刷新的位置,使用this.reload()调用,即可刷新当前页面.
export default { name: "ItemPage", components: {}, inject: ["reload"], //注入reload方法 data() { return { }; }, methods: { //页面逻辑操作方法 handleClick() { //此处操作页面功能 //....... this.reload(); //此处刷新页面 } }, mounted() { } };
相关文章
- vue.js入门学习
- vue - Vue介绍
- Vue2.0 搭建Vue脚手架(vue-cli)
- vue基础篇---修改对象或数组的值,页面实时刷新
- vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明
- Vue - 去掉控制台 Download the Vue Devtools extension for a better development experience: https://xxx 打印
- Vue实现路由跳转的几种方式(直接上代码)
- vue中实现页面顶部加载进度条
- (13)打鸡儿教你Vue.js
- vue-router和webpack懒加载,页面性能优化篇
- Vue实战系列(一) - 最简化登录页面
- vue生命周期之缓存过的页面刷新数据逻辑
- vue中的一个组件就是一个vue实例吗?
- 基于Java+Vue+MySQL开发在线视频系统【100010557】
- Mui---自己利用Vue编写的表格
- VUE+servlet上传多文件实践
- VUE-003-前端表格数据展示时,设置单元格(el-table-column)保留空格和换行
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- 小白都能看明白的vue/cli4总结
- 怎样创建前端公共vue组件库
- 浅析Vue数据更新了但页面不更新的7种情况及vue异步更新带来的数据响应的误解
- Vue实战第3章:主页设计之顶部导航栏
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- 怎么在Vue中使用axios组件
- vue学习:打开/刷新一个页面时,触发一个后端请求
- 关于vue的页面跳转后,如何每次进入页面时都能获取后台数据
- Vue常见问题及解决-页面刷新vuex状态初始化