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來做前端了，那么這里就推薦使用第二種方式吧~

 

嗯，就醬~~