VUE之页面刷新

最新推荐文章于 2023-08-05 16:54:30 发布
转载 最新推荐文章于 2023-08-05 16:54:30 发布 · 213 阅读 · 1

vue项目如何刷新当前页面

前几天遇到页面刷新一个问题,网上百度了之后,发现刷新当前页面常用的方法是：

第一种方法是：window.reload()；

第二种方法是：location.reload()；

第三种方法是：this.$router.go(0);

这几种方法是可以刷新当前面，但刷新的那一瞬间，页面会有一瞬间空白闪烁；这样用户体验不好。

今天给大家介绍另一种方法：

使用provice和inject结合的方法。此方法着实有效，不会有闪烁的空白出现。如下：

首先在App.vue组件里声明这个方法，写法如下：

然后在你想要刷新当前页面的组件调用这个方法：

 

 

Hi,好先生
关注
VUE.JS--绑定方法到WINDOW对象
ishell1021的博客
03-08 1万+
公司有一个项目需求，需要写一个全局函数给客户端调用，通过客户端传数据回来渲染到页面； 通过jsBridge方法，H5可以调用客户端（ios，android）的内部方法，同样，客户端也需要能调用H5页面里定义的js方法。 之前项目是通过jsBridge方法调的客户端方法（拍照，扫描二维码，选择通讯录等），由于客户端换了一个项目组的方法，他们只提供链接，当H5打开这个链接后，客户端调用全局函数，通...
vue不用window的方式刷新当前页面
donggua_123的博客
05-20 2658
vue项目中我们很多时候需要刷新页面，比如本地用户信息更新后，或者需要重新加载当前页面的数据时，使用window.location.reload()或者window.history.go(0)方法都是整个窗口的刷新，和h5快捷键一样，会有短暂空白出现，体验很不好，这里说两种在vue项目里使用的无感知刷新页面方法： 一、provide/inject方法 父组件中provide提供的属性可以在任何...
浅谈重写window对象的方法
tbapi_ok的博客
08-05 242
这相当于在ICbBmZCmwindow对象上添加了一个alert属性，它的优先级比内置的alert高，所以可以达到重写的效果，但这很容易突破，执行以下语句，就会还原alert。全局变量虽然也会注册为window对象的一个属性，但它不可删除，它是事实上绝对存在的。重写window对象的方法不是一件新奇的事，比如我们可能需要改变默认alert的行为，如何安全的重写呢？因为通过这种方式重写的alert，只不过是window对象的一个属性而已，可以通过delete操作符删除。浅谈重写window对象的方法。
Vue刷新页面的三种方式
seimeii的博客
04-11 1141
Vue刷新页面的三种方式
vue 刷新不闪烁
weixin_33711647的博客
03-05 1434
1、修改APP.vue<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { ...
Vue页面刷新记住页面状态的实现
10-15
总结一下，实现Vue页面刷新后记住状态的主要步骤包括： 1. 使用`<keep-alive>`组件缓存路由组件。 2. 将页面状态保存到`sessionStorage`中。 3. 创建一个混入对象`paramsMemoryMixin`，处理参数的保存和恢复。 4. 在...
Vue监听页面刷新和关闭功能
10-16
本文将详细介绍如何使用Vue.js监听页面刷新和关闭事件，以及如何结合JavaScript事件来实现这一功能。 首先，Vue的生命周期钩子函数是处理这类问题的关键。在Vue组件中，`beforeDestroy`生命周期钩子可以用来在组件...
vue单页面实现当前页面刷新或跳转时提示保存
10-17
对于防止页面刷新导致数据丢失的需求，主要使用的是beforeRouteLeave钩子。在这个钩子中，可以通过window.confirm弹出一个提示框，询问用户是否确定要离开当前页面。如果用户选择取消，就可以通过调用next(false)来...
解决vue页面刷新或者后退参数丢失的问题
08-27
解决 Vue 页面刷新或者后退参数丢失的问题 在 Vue 项目中，经常会遇到列表数据筛选查询的情景。当要打开某一项的详情页或者暂时离开列表页，再返回（后退时），选择的筛选条件会全部丢失，这种情况会对用户体验产生...
vue项目如何刷新当前页面的方法
08-27
Vue 项目刷新当前页面方法 在 Vue 项目中，刷新当前页面是非常常见的需求，例如在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。本文将介绍 Vue 项目如何刷新当前页面的方法。 问题...
Vue 刷新局部页面（不闪烁）
weixin_45414972的博客
11-06 2408
首先在App.vue组件写入 <template> <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', p...
vue解决刷新页面时会出现变量闪烁
YOYO的博客
07-16 5271
在使用vue绑定数据的时候，刷新页面时会出现变量闪烁，解决办法是: v-cloak,将代码修改如下: &lt;div class="#app" v-cloak&gt; &lt;p&gt;{{value.name}}&lt;/p&gt; &lt;/div&gt;...
vue实现刷新页面经典篇。避免闪屏。
qq_42957741的博客
05-14 2165
app.vue 定义全局刷新页面的方法。其他页面需要时直接调用，下面会写调用方法，避免闪屏 <template> <div id="app"> <keep-alive :include="arr"> <router-view v-if="isRouterAlive"/> </keep-alive> </div> </template> <script> expo.
Vue随笔（二）生命周期
u013798317的博客
11-27 380
vue生命周期可以分为八个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后） 下面我们就来分别看看vue生命周期的这八个阶段： 1、创建前（beforeCreate） 对应的钩子函数为...
【Vue/JS】打开新页面，返回上一页面并刷新数据
sunshine641的博客
04-07 8330
跳转页面 js方法: 参考链接 window.open('http://www.baidu.com','_blank'); //新页面打开 window.open('http://www.baidu.com','_self'); //当前页面打开 html标签: //在a标签中跳转，用target： <a href="http://www.baidu.com" target="_blank"> <a href="http://www.baidu.
Vue项目实战02 : vue项目刷新当前页面的三种方法
达拉崩巴斑得贝迪卜多比鲁翁_
10-08 2196
想必大家在刨坑vue的时候也遇到过下面情形：比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种： 这时候我们最直接的思维就是想到下面这种： 但是，试过的会发现用vue-router重新路由到当前页面，页面是不进行刷新的，根本没有任何作用~所以这个方法out！ 下面我这边整理几种可圈可点的三种方式，大家可以自行的选择： 1、最直接整个页面重新刷新： location. reload() this.$router.go(0) 这两种都可以刷新当前页面的，缺点就是相当于...
解决vue router组件状态刷新消失的问题
明月如霜丶
12-31 2714
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: ‘index’, params: res.data})跳转到主页，并在主页显示数据。但是当刷新页面时，由于并不是通过登录接口进入主页，router中没有‘params: res.data’信息，主页无法获取到登录信息。 解决方案： 1、session&amp;服务器渲染...
解决vuex页面刷新重新赋值问题
qq_42335214的博客
02-10 1428
每次刷新就会发现vuex里面的值并没有改变。 解决：利用vuex-along保持持久化。 安装：npm install vuex-along -save 使用：在stroe的文件中引入import createVuexAlong from 'vuex-along'， 代码如下 export default new Vuex.Store({ state: {}, mutations: {}, ...
vue2页面刷新
最新发布
09-04
在 Vue 2 中，页面刷新通常指的是**重新加载组件或重新获取数据**。由于 Vue 是单页应用（SPA），页面刷新不会像传统多页应用那样完全刷新整个 HTML 页面，而是通过 Vue 的响应式机制来实现组件的重新渲染或数据的重新加载。 --- ### ✅ 实现 Vue2 页面刷新的几种方式： #### 1. **重新加载整个组件（通过 key 强制重建组件）** ```vue <template> <div> <button @click="refresh">刷新组件</button> <MyComponent :key="componentKey" /> </div> </template> <script> import MyComponent from './MyComponent.vue'; export default { components: { MyComponent }, data() { return { componentKey: 0 }; }, methods: { refresh() { this.componentKey += 1; // 每次改变 key，组件都会重新创建 } } }; </script> ``` --- #### 2. **仅刷新数据（重新获取数据）** ```vue <template> <div> <button @click="refreshData">刷新数据</button> <div v-for="item in items" :key="item.id">{{ item.name }}</div> </div> </template> <script> export default { data() { return { items: [] }; }, created() { this.fetchData(); }, methods: { fetchData() { // 模拟 API 请求 setTimeout(() => { this.items = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]; }, 500); }, refreshData() { this.items = []; // 清空旧数据 this.fetchData(); // 重新加载 } } }; </script> ``` --- #### 3. **强制刷新整个页面（不推荐）** ```javascript location.reload(); // 强制刷新整个页面，SPA 中不推荐使用 ``` --- ### 🔍 解释： - **Vue 是响应式框架**，不需要像传统页面那样“刷新”，只需要更新数据即可自动更新视图。 - **`key` 属性用于控制组件是否重新渲染**，适用于需要完全重建组件的场景。 - **数据刷新**是最常见的“刷新”方式，适用于大多数业务场景。 - **`location.reload()`** 虽然可以刷新整个页面，但会破坏 SPA 的体验，通常用于调试或特殊情况。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值