當(dāng)vue單頁(yè)面需要替換參數(shù)并刷新頁(yè)面時(shí),這個(gè)時(shí)候使用this.$router.push或this.$router.replace會(huì)發(fā)現(xiàn)路由改變了,但是頁(yè)面上的數(shù)據(jù)并沒有實(shí)時(shí)刷新。在網(wǎng)上找到了以下幾種方法,親測(cè)可用:
this.$router.go(0)
在具體頁(yè)面中,先通過this.$router.push或this.$router.replace替換路由,隨后調(diào)用this.$router.go(0),頁(yè)面就會(huì)強(qiáng)制刷新,但是該強(qiáng)制刷新與F5刷新效果類似,頁(yè)面會(huì)有空白時(shí)間,體驗(yàn)感不好;
provide/inject
首先在app.vue頁(yè)面中增加如下配置:
<template> <div id="app">  <router-view v-if="isRouterAlive" /> </div></template><script>export default { name: 'App', data() {  return {   isRouterAlive: true  } }, provide() {  return {   reload: this.reload  } }, methods: {  reload() {   this.isRouterAlive = false   this.$nextTick(() => {    this.isRouterAlive = true   })  } }}</script>然后在具體頁(yè)面中加上inject配置,具體如下:
 export default {  name: 'orderAndRandom',    // 就是下面這行  inject: ['reload'],  data() {},    // 省略 }加上配置后,在調(diào)用this.$router.push或this.$router.replace替換路由后,再新增this.reload()就可以實(shí)現(xiàn)頁(yè)面內(nèi)數(shù)據(jù)刷新。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注