网页自动刷新

闪闪发光惹人爱~

已于 2022-12-29 11:06:37 修改

阅读量5k

点赞数 1

分类专栏： JS 文章标签： javascript vue.js

于 2022-07-28 16:12:23 首次发布

本文链接：https://blog.csdn.net/qq_43210656/article/details/126037438

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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来调用就行