本文實(shí)例講述了vue實(shí)現(xiàn)路由不變的情況下，刷新頁面操作。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)公司專注于清水網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供清水營銷型網(wǎng)站建設(shè)，清水網(wǎng)站制作、清水網(wǎng)頁設(shè)計(jì)、清水網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務(wù)，打造清水網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供清水網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

背景1：在vue寫的后臺(tái)管理項(xiàng)目中，經(jīng)常會(huì)有增、刪、改、查的操作，這些操作只是跟用接口跟后臺(tái)交互下

既然用接口交互，那肯定就是axios的異步請求，那么就是說后臺(tái)數(shù)據(jù)發(fā)生了改變，但是前臺(tái)的數(shù)據(jù)并沒有實(shí)時(shí)的更新（每次操作完后臺(tái)把列表數(shù)據(jù)重新返給你例外，但是這樣的話每次交互的數(shù)據(jù)量就偏大了）

背景2：在使用動(dòng)態(tài)路由配置 /detail/:id這樣的情況下，由于 router-view是復(fù)用的，單純的改變 id 的值并不會(huì)刷新 router-view

所以就要想一個(gè)辦法，讓后臺(tái)執(zhí)行完操作后，給前臺(tái)返一個(gè)操作結(jié)果，然后前臺(tái)手動(dòng)刷新頁面

一開始我想到的是用 window.location.reload() 或者 this.$router.go(0) 這兩個(gè)方法，但是后來發(fā)現(xiàn)這兩個(gè)方法會(huì)有短暫的白屏?xí)r間，用戶體驗(yàn)并不太好，所以就放棄了，看了下別人的做法，整理下面兩種方法：

一、用中轉(zhuǎn)站的方式

這種方式意思就是讓每次操作完成以后，都讓路由跳轉(zhuǎn)到這個(gè)中轉(zhuǎn)站頁面，然后這個(gè)頁面獲取到進(jìn)來路由的路徑再返回去就可以了，這種方式可以作為解決方法之一，普遍用的還是第二種。

二、provide / inject 的方式

這種方式，就是讓通過 provide 讓 App.vue 為所有子孫頁面注入一個(gè) reload 的方法，然后在需要使用的頁面，通過 inject 注入即可，代碼如下：

App.vue

<template>
 <div id="app">
  <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>

子頁面

export default {
  name: 'children',
  inject: ['reload'],
  data(){
    return {}
  }
  methods: {
    delData(){
      //在axios成功的回調(diào)里面
      this.reload();
    }
  }
}

希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。

網(wǎng)站名稱：vue實(shí)現(xiàn)路由不變的情況下，刷新頁面操作示例
文章源于：http://aaarwkj.com/article36/jesdpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、自適應(yīng)網(wǎng)站、軟件開發(fā)、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)