vue 刷新页面
第一种 无痕刷新
先在全局组件注册一个方法，用该方法控制 router-view 的显示与否，然后在子组件调用；
用 v-if 控制 的显示；
provide：全局注册方法；
inject：子组件引用 provide 注册的方法；
APP.vue代码
<template>
<div id="app">
<!-- 添加v-if判断 -->
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: "App",
provide() {
//注册一个全局的方法
return {
reload: this.reload
};
},
data() {
return {
isRouterAlive: true
};
},
methods: {
reload() {
//刷新页面
this.isRouterAlive = false;
this.$nextTick(function() {
this.isRouterAlive = true;
});
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
</style>
当前组件进行刷新：
<template>
<div id="index">
<el-button type="success" icon="el-icon-plus" @click=" updataall()">无痕刷新</el-button>
</div>
</template>
<script>
export default {
name: "index",
inject: ["reload"],//引入方法
data() {
return {
};
},
methods: {
updataall() {
this.reload(); //调用方法，刷新当前页
}
}
};
</script>
第二种 强制刷新
window.location.reload() //原生 js 提供的方法；可以简写为：location.reload()
window.history.go(0) //这里的window可以省略不写
this.$router.go(0) //vue 路由里面的一种方法；
这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按 F5 刷新页面，页面的重新载入，会有短暂的白屏。
第三种 伪造刷新
通过路由跳转的方法刷新，具体思路是点击按钮跳转一个空白页，然后再马上跳回来：
当前页面index.vue
<template>
<div>
<el-button type="primary" class="btn" @click="btnaction">ti'ao'zhuang</el-button>
</div>
</template>
<script>
export default{
data(){
return{
}
},
mounted(){
},
methods:{
btnaction() {
this.$router.replace({
path:'/kong',
name:'Kong'
})
}
}
}
空白页面kong.vue
<template>
<h1>
空页面
</h1>
</template>
<script>
export default{
data() {
return{
}
},
created(){
this.$router.replace({
path:'/index',
name:'Index'
})
}
}
router的index.js路由配置
{
path: '/index',
name: 'Index',
component: Index,
},
{
path: '/kong',
name: 'Kong',
component: Kong,
},