（13）vue刷新页面

逃离我推掉我的手 2022-10-01 12:51 157阅读 0赞

### 常用的有三种方法，最后一种用的比较多： ###

### 1.使用`window.location.href` `window.location.replace()` `window.location.reload()` ###

会出现空白，体验不是很好

### 2.先进入一个空路由，然后返回 ###

reflashPage(){
        let NewPage = '_empty' + '?time=' + new Date().getTime()/500;
        this.$router.push(NewPage);
        this.$router.go(-1);
    }

刷新后点浏览器的前进按钮会出现空白页

### 3.使用 `provide` / `inject` ###

简单的来说就是在父组件中通过`provide`来提供变量，然后在子组件中通过`inject`来注入变量。

app.vue

<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引入`

export default {
        inject:['reload'],
        data () {
            return {
            ...
            }
        },

后面想刷新当前页面的地方这样写：

this.reload();

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue刷新页面丢失404

解决方案 nginx添加配置文件下面内容加入配置文件 location @rewrites { rewrite ^(.

偏执的太偏执、/ 2022年12月29日 00:13/ 0 赞/ 212 阅读

相关 vue导航栏刷新返回刷新前页面

vue导航栏刷新返回刷新前页面座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人 -------------------- 文章目录

怼烎@/ 2022年12月24日 09:56/ 0 赞/ 157 阅读

相关 Vue实现页面的局部刷新（router-view页面刷新）

[https://blog.csdn.net/a5252145/article/details/102745598?utm\_medium=distribute.pc\_rel

港控/mmm°/ 2022年12月22日 11:23/ 0 赞/ 315 阅读

相关 vue项目如何刷新当前页面

> 最近开发了自定义的表单，作为dialog的形式存在在表格同页面的部分，表单提交后，我会吧相关的dialog弹框关闭，但是列表数据并没有进行相关的加载，但是我又不想windo

女爷i/ 2022年12月08日 14:14/ 0 赞/ 174 阅读

相关 vue如何实现页面刷新

目录 1.this.$router.go(0) 2.location.reload() 3.跳转空白页再回跳 4.控制的显示隐藏 5.搭配provide/inject

╰+哭是因爲堅強的太久メ/ 2022年11月27日 08:46/ 0 赞/ 323 阅读

相关（13）vue刷新页面

常用的有三种方法，最后一种用的比较多： 1.使用`window.location.href` `window.location.replace()` `window.l

逃离我推掉我的手/ 2022年10月01日 12:51/ 0 赞/ 158 阅读

相关 vue页面刷新，定位导航栏

项目还没结束，vue的踩坑之路就不能停（酸爽），我发现用vue-router,每次刷新页面，导航栏就会自动定位到首页，像这样， ![70][] 用户体验真的是相当差。

浅浅的花香味﹌/ 2022年05月23日 11:41/ 0 赞/ 309 阅读

相关 vue 单页面重载（刷新）

首先先说一下标题，此处的重新（刷新）并不是浏览器 `reload` ，只是当前页面组件重新 `create` 。最近重构的项目中有重新加载的按钮，以前直接是 `locati

刺骨的言语ヽ痛彻心扉/ 2021年12月17日 00:55/ 0 赞/ 491 阅读

相关 Vue定时刷新页面数据

我现在只知道两种最常见的定时刷新方案，一种是利用Vue的内置函数setTimeout、setInterval定时执行，另一种是websocket消息推送。我的需求是，当数据库中

骑猪看日落/ 2021年09月24日 01:54/ 0 赞/ 789 阅读

相关 Vue实现页面的局部刷新

1. 首先需要修改App.vue ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

谁践踏了优雅/ 2021年07月25日 13:03/ 0 赞/ 475 阅读