1.页面自动刷新：

把如下代码加入<head>区域中，其中20指每隔20秒刷新一次页面.

<meta http-equiv="refresh" content="20">


2.页面自动跳转：

把如下代码加入<head>区域中,其中20指隔20秒后跳转到https://www.jb51.net页面

<meta http-equiv="refresh" content="20;url=https://www.jb51.net">


3.页面自动刷新js版

window.location.reload()

4.刷新不在路由中的组件（手动刷新页面）

① 更改 router-view的 key值

<template>
  <div id="app">
    <keep-alive>
      <router-view :key="key"></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  computed: {
    key() {
      return this.$route.path + Math.random();
    }
  },
};
</script>

② provide / inject 组合

若需要更新不在路由中的组件，可通过声明reload方法，控制需要重新加载（更新）的组件，这边定义了isRouterAlive //true or false 来控制

也可通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载

首先，要修改下app.vue

<template>
  <div id="app">
    <Header v-if="isRouterAlive"></Header>
    <BaseSwiper class="baseSwiper"></BaseSwiper>
    <div class="line"></div>
    <keep-alive>
      <router-view :key="key"></router-view>
    </keep-alive>
    <!-- <router-view v-if="!$route.meta.keepAlive"></router-view> -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/header";
import Footer from "@/components/footer";
import BaseSwiper from "@/components/base-swiper.vue";
export default {
  components: {
    Header,
    Footer,
    BaseSwiper,
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  },
  computed: {
    key() {
      return this.$route.path + Math.random();
    }
  },

};
</script>

然后在需要当前页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，然后直接用this.reload来调用就行

 

# javascript
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟