vue.js怎么刷新当前页面?

vue.js怎么刷新当前页面?下面本篇文章就来给大家介绍一下vue.js刷新当前页面的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

vue.js怎么刷新当前页面?

Vue.js的路由跳转很强大,类似ajax的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现。

第一种就是传统的的方法

window.location.reload();

第二种是通过vue.js的路由来实现

this.$router.go(0)
<template>
  <section>
    <h1 ref="hello">{{ value }}</h1>
    <el-button type="danger" @click="get">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        value: 'Hello World ~'
      };
    },
    methods: {
      get() {
        this.$router.go(0);
        // window.location.reload();
      }
    },
    mounted() {
    },
    created() {
    }
  }
</script>

第三种是使用浏览器自带的刷新功能,window.history.go(0),这里的window可以省略不写

history.go(0);
<template>
  <section class="p-10">
    <el-button type="danger" @click="back">返回</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
      back() {
        history.go(0);
      }
    }
  };
</script>

既然使用vue来做前端了,那么这里就推荐使用第二种方式吧~

更多前端开发知识,请查阅 HTML中文网 !!

以上就是vue.js怎么刷新当前页面?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读