使用location.reload()
或者是
路由的 this.$router.go(0)
进行刷新的时候,是会出现一阵的空白区域的,因为是整个页面的刷新
,所以比较缓慢,因此使用了provide/inject的方法。
在App.vue中写入以下代码:
<template> <div id="app"> <router-view v-if="isRouterAlive"/> </div> </template> <script> export default { name: "app", //提供一个依赖 provide(){ return { reload:this.reload } }, data(){ return { isRouterAlive:true } }, //声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载 methods:{ reload(){ this.isRouterAlive = false; this.$nextTick(function(){ this.isRouterAlive=true }) } } }; </script> <style>
.size{
100%;
heigth:100%;
} html,body{
.size; margin: 0; padding: 0; } #app { .size;
}
</style>
子页面引用
<script> export default { inject:['reload'] , methods:{ reload(){ this.reload() } } } </script>
provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名