<p><code></p> <p>在vue的项目中刷新功能你会怎么写?<br />我之前一直用<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$router.go(0)这个方法用户体验很不好,因为页面会闪动一下刷新<br />直到我发现了这个方法 provide /inject <br />不过这个方法貌似有兼容问题,首先要确定一下你的vue版本,此方法适用vue 2.20+<br /><strong>原理:此方法使用的是v-if来控制router-view的显示或隐藏,v-if从false变为true时,vue会重新渲染router-view区域,所以当参数变化时,只需让v-if 从true =&gt; false =&gt; true,就能实现页面刷新</strong><br />首先,找到自己的route-view</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//App.vue <template></p> <div id=&quot;app&quot;> <router-view v-if=&quot;isRouterAlive&quot;></router-view> </div> <p> </template></p> <p> <script> export default { name: 'App', provide() { return { reload: this.reload//调用reload方法 } }, data() { return { isRouterAlive: true//一开始router-view为true } },</p> <p> methods: { reload() { this.isRouterAlive = false //在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM this.$nextTick(() => { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.isRouterAlive = true }) } } } </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>//App.vue <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"isRouterAlive"</span>/&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'App'</span>, provide() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">reload</span>: <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.reload<span class="hljs-comment">//调用reload方法</span> } }, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">isRouterAlive</span>: <span class="hljs-literal">true</span><span class="hljs-comment">//一开始router-view为true</span> } }, <span class="hljs-attr">methods</span>: { reload() { <span class="hljs-keyword">this</span>.isRouterAlive = <span class="hljs-literal">false</span> <span class="hljs-comment">//在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 <a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a></span> <span class="hljs-keyword">this</span>.$nextTick(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { <span class="hljs-keyword">this</span>.isRouterAlive = <span class="hljs-literal">true</span> }) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>然后在&lt;route-view&gt;下显示的vue页面中进行如下操作</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" export default { name: 'newproduct', inject:['reload'],//在export default下面加上这一段 method:{ //调用App.vue下的this.reload()方法,来改变v-if的状态 clickDiv(){//刷新按钮调用的方法 this.reload() } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code> <span class="hljs-selector-tag">export</span> <span class="hljs-selector-tag">default</span> { <span class="hljs-attribute">name</span>: <span class="hljs-string">'newproduct'</span>, inject:[<span class="hljs-string">'reload'</span>],//在export default下面加上这一段 method:{ //调用App.vue下的this.<span class="hljs-built_in">reload</span>()方法,来改变v-if的状态 <span class="hljs-built_in">clickDiv</span>(){//刷新按钮调用的方法 this.<span class="hljs-built_in">reload</span>() } } </code></pre> <p>就ok了</p> <p>加油!每天进步一点点!</p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25517.html