Vue中對iframe實現keep alive（無刷新）

k00baa 發布于2019-08-26 10:21 / 718人閱讀

摘要：前言最近一個需求，需要在項目中加入含有的頁面，同時在路由切換的過程中，要求的內容不會被刷新。的原理要實現對保持頁的狀態。實現的思路既然保持頁里的狀態很難實現，在這個時候我想到了一個別的方法。

前言

最近一個需求，需要在Vue項目中加入含有iframe的頁面，同時在路由切換的過程中，要求iframe的內容不會被刷新。一開始使用了Vue自帶的keep- alive發現沒有用，于是自己研究了一下解決方案。。。。。。

Vue的keep-alive原理

要實現對保持iframe頁的狀態。我們先搞清楚為什么Vue的keep-alive不能湊效。keep-alive原理是把組件里的節點信息保留在了VNode（在內存里），在需要渲染時候從Vnode渲染到真實DOM上。iframe頁里的內容并不屬于節點的信息，所以使用keep-alive依然會重新渲染iframe內的內容。另外，我也嘗試有過想法：如果把整個iframe節點保存起來，然后需要切換時把它渲染到目標節點上，能否實現iframe頁不被刷新呢？————也是不可行的，iframe每一次渲染就相當于打開一個新的網頁窗口，即使把節點保存下來，在渲染時iframe頁還是刷新的。

實現的思路

既然保持iframe頁里的狀態很難實現，在這個時候我想到了一個別的方法。能否在Vue的route-view節點上動點手腳？使得在切換非iframe頁的時候使用Vue的路由，當切換iframe頁時則使用v-show切換顯示與隱藏，使得iframe節點一直不被刪除，這樣就能保持iframe的狀態了。

我們簡陋的實現一下以上的效果，上代碼：

入口main.js:

import Vue from "vue/dist/vue.js"
import App from "./App.vue"
import VueRouter from "vue-router";

const Index = { template: "Index" }
const routes = [
  // 含有iframe的兩個頁面
  {
    path: "/f1",
    name: "f1"
  },
  // 含有iframe的兩個頁面
  {
    path: "/f2",
    name: "f2"
  },
  {
    path: "/index",
    component: Index
  }
]

const router = new VueRouter({
  routes
});

Vue.use(VueRouter);
new Vue({
  render: h => h(App),
  router
}).$mount("#app")

根組件:

上面代碼簡單來說，關鍵的地方首先是main.js初始化路由時，對iframe頁不填寫屬性component，這樣頁面就是空白的。然后在router-view節點旁邊渲染iframe頁組件，使用$route.path判斷當前路由的指向，控制iframe頁的顯示與隱藏。

優化

上面代碼簡單的解決了問題，但還有一些地方可以優化：

iframe頁在根節點App.vue一渲染時已經渲染了，對此iframe頁可以做成懶加載，只有在進入過相應頁面了觸發渲染，并且渲染過之后就用v-show切換顯示與隱藏

每當增加一個iframe頁都要增加一段的組件引入注冊和調用的代碼。比較繁瑣。我們目標應該做到每增加一個iframe頁，只需要添加盡量少的代碼。這里思路是：

在路由配置中定義一個屬性，用于標識該頁面是否含有iframe的頁面

根據標識，iframe頁組件自動動態注冊和渲染，無需再手寫額外的代碼

router-view和iframe切換的邏輯封裝成新組件，用它替代原有的router-view

我們先修改router的配置,增加一個屬性名iframeComponent，用于標識是否包含iframe，該屬性的值是組件文件引用

main.js:

import F1 from "./components/f1";
import F2 from "./components/f2";

const routes = [
  {
    path: "/f1",
    name: "f1",
    iframeComponent: F1 // 用于標識是否含有iframe頁
  },
  {
    path: "/f2",
    name: "f2",
    iframeComponent: F2 // 用于標識是否含有iframe頁
  },
  {
    path: "/index",
    component: { template: "Index" }
  }
]

const router = new VueRouter({
  routes // （縮寫）相當于 routes: routes
});

new Vue({
  render: h => h(App),
  router
}).$mount("#app")

接下來我們第二步和第三步結合在一起，封裝新的組件iframe-router-view.vue：

該組件主要做的是根據main.ja里的routes生成一個只含有iframe頁的數組對象。

watch上監聽$route，判斷當前頁面在iframe頁列表里的話就設置hasOpen屬性為true，渲染該組件

用v-show="$route.path === item.path"切換iframe頁的顯示與隱藏。

邏輯并不復雜，這里就不多贅述。

結語

大家如果有更好的實現方法，或者我上面還有什么需要更正的錯誤，歡迎交流。
上面demo的代碼放在了個人github上https://github.com/jmx164491960/vue-iframe-demo

GPU云服務器云服務器無刷新上傳文件iframe php實現無刷新跳轉 iframe局部刷新無刷新加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106029.html

Vue中對iframe實現keep alive（無刷新）

摘要：前言最近一個需求，需要在項目中加入含有的頁面，同時在路由切換的過程中，要求的內容不會被刷新。的原理要實現對保持頁的狀態。實現的思路既然保持頁里的狀態很難實現，在這個時候我想到了一個別的方法。前言最近一個需求，需要在Vue項目中加入含有iframe的頁面，同時在路由切換的過程中，要求iframe的內容不會被刷新。一開始使用了Vue自帶的keep- alive發現沒有用，于是自己研究了...

heartFollower 2019-08-02 15:38 評論0 收藏0
面試官常問——vue篇

摘要：如果要相應狀態改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。 1.vue生命周期2.vue 雙向綁定原理3.vue router原理4.vue router動態路由 1.vue 生命周期鉤子 showImg(https://segmentfault.com/...

BlackMass 2019-08-30 15:55 評論0 收藏0
面試官常問——vue篇

摘要：如果要相應狀態改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。 1.vue生命周期2.vue 雙向綁定原理3.vue router原理4.vue router動態路由 1.vue 生命周期鉤子 showImg(https://segmentfault.com/...

xingqiba 2019-08-23 15:25 評論0 收藏0
面試官常問——vue篇

摘要：如果要相應狀態改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。 1.vue生命周期2.vue 雙向綁定原理3.vue router原理4.vue router動態路由 1.vue 生命周期鉤子 showImg(https://segmentfault.com/...

quietin 2019-08-02 14:19 評論0 收藏0
用Vue開發仿旅游站webapp項目總結（下）

摘要：用開發仿旅游站項目總結上該說的話，該表明的上篇已經表明了。之后的路由切換不再請求數據是因為組件內容是從內存取了不會再重新創建了，對應的鉤子函數不會再執行了。此時，通過新增的生命周期鉤子函數以及這個緩存值就實現了我們要的功能了。用Vue開發仿旅游站webapp項目總結（上）該說的話，該表明的上篇已經表明了。謝謝上篇評論區一些同學~ 很鼓勵我，不過下下篇估計沒了，這篇總結完，下下篇可...

libxd 2019-08-29 17:15 評論0 收藏0