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