Vue中刷新页面的三种方式

一、通过js原始方法刷新

<template>   <div>       <div class="header">           <button @click="update()">刷新页面</button>       </div>   </div> </template>  <script> export default { data(){   return{   } }, methods:{   update(){     location.reload()   } } } </script> 

二、通过Vue自带的路由进行跳转

<template>   <div>       <div class="header">           <button @click="update()">刷新页面</button>       </div>   </div> </template>  <script> export default { data(){   return{   } }, methods:{   update(){     this.$router.go(0)   } } } </script> 

三、通过在APP页面进行demo进行刷新，不会像前两种那样出现短暂的闪烁效果，提升用户体验，通常可以使用这种方式

（1）、在APP页面中写入下面代码

<template>   <div id="app">     <router-view v-if="isShow"/>   </div> </template>  <script> export default {   name: 'App',   provide(){     return{       reload:this.reload     }   },   data(){     return{       isShow:true     }   },   methods:{     reload(){       this.isShow=false;       this.$nextTick(()=>{         this.isShow=true       })     }   } } </script> 

（2）、在需要刷新的页面进行引入并使用

<template>   <div>       <div class="header">           <button @click="update()">刷新页面</button>       </div>   </div> </template>  <script> export default { data(){   return{    } }, inject:[   'reload' ], methods:{   update(){     this.reload()     console.log('刷新页面')   } } } </script> 

如果对您有用的话，别忘了给个三连，多谢多谢