Shulou(Shulou.com)05/31 Report--

In this article Xiaobian introduces in detail "how to achieve keep alive without refresh on iframe in Vue", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to achieve keep alive without refresh on iframe in Vue" can help you solve your doubts.

The keep-alive principle of Vue

To maintain the state of the iframe page. Let's figure out why Vue's keep-alive doesn't work. The principle of keep-alive is to keep the node information in the component in VNode (in memory) and render from Vnode to real DOM when you need to render. The content in the iframe page does not belong to the node information, so using keep-alive will still re-render the content in the iframe. In addition, I also tried to have an idea: if you save the entire iframe node and then render it to the target node when you need to switch, can the iframe page not be refreshed? -it is not feasible either. Every time iframe renders, it is equivalent to opening a new web page window. Even if the node is saved, the iframe page is refreshed when rendering.

The idea of realization

Since keeping the state in the iframe page is hard to achieve, I've come up with another way at this point. Can you tamper with the route-view node of Vue? Make use of Vue routing when switching non-iframe pages, and use v-show switch to show and hide when switching iframe pages, so that the iframe node has not been deleted, so that the state of iframe can be maintained.

Let's simply achieve the above effect and put on the code:

Entry 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 = [/ / two pages with iframe {path:' / f1cards, name: 'f1'}, / / two pages with iframe {path:' / f2posts, name: 'f2'}, {path:' / index', component: Index}] const router = new VueRouter ({routes}); Vue.use (VueRouter) New Vue ({render: h = > h (App), router}). $mount ('# app')

Root component:

Go to F1 Go to F2 Go to Index import F1 from'. / components/f1';import F2 from'. / components/f2';export default {name: 'app', components: {F1, F2},}

To put it simply, the key point is that when main.js initializes the route, the attribute component is not filled in for the iframe page, so that the page is blank. Then render the iframe page component next to the router-view node, use $route.path to determine the direction of the current route, and control the display and hiding of the iframe page.

The above code simply solves the problem, but there are some areas that can be optimized:

The iframe page has already been rendered when the root node App. Vue is rendered, and the iframe page can be loaded lazily. Only after entering the corresponding page, the rendering is triggered, and after rendering, you use v-show to switch between show and hide.

Each time you add an iframe page, add a section of the component to introduce the registration and invocation code. It's cumbersome. Our goal is to add as little code as possible for each additional iframe page. The idea here is:

Define an attribute in the routing configuration that identifies whether the page contains an iframe page

According to the identity, the iframe page component automatically registers and renders dynamically, eliminating the need for additional handwritten code

The logic of router-view and iframe switching is encapsulated into a new component, which replaces the original router-view.

Let's first modify the configuration of router and add a property name, iframeComponent, to identify whether the iframe is included. The value of this property is a component file reference.

Main.js:

Import F1 from'. / components/f1';import F2 from'. / components/f2' Const routes = [{path:'/ f1pages, name: 'f1pages, iframeComponent: F1 / / to identify whether there is an iframe page}, {path:' / f2pages, name: 'f2pages, iframeComponent: F2 / / to identify whether there are iframe pages}, {path:' / index', component: {template: 'Index'}}] const router = new VueRouter ({routes / (abbreviated) equals routes: routes}) New Vue ({render: h = > h (App), router}). $mount ('# app')

Next, let's combine the second and third steps to encapsulate the new component iframe-router-view.vue:

Import Vue from 'vue/dist/vue.js'export default {created () {/ / sets the array object of the iframe page const componentsArr = this.getComponentsArr (); componentsArr.forEach ((item) = > {Vue.component (item.name, item.component);}); this.componentsArr = componentsArr; / / determines whether the current route is iframe page this.isOpenIframePage () }, data () {return {componentsArr: [] / pages with iframe}}, watch: {$route () {/ / determine whether the current route is an iframe page this.isOpenIframePage ();}}, computed: {/ / realize lazy loading, and only render hasOpenComponentsArr () {return this.componentsArr.filter (item = > item.hasOpen) of iframe pages that have been opened (hasOpen:true) }, methods: {/ / according to the current route setting hasOpen isOpenIframePage () {const target = this.componentsArr.find (item = > {return item.path = this.$route.path}); if (target & &! target.hasOpen) {target.hasOpen = true;}}, / / traverses all the pages of the route, collecting getComponentsArr () {const router = this.$router containing the iframeComponent logo Const routes = router.options.routes; const iframeArr = routes.filter (item = > item.iframeComponent); return iframeArr.map ((item) = > {const name = item.name | | item.path.replace ('/',''); return {name: name, path: item.path, hasOpen: false, / / whether it has been opened, default false component: item.iframeComponent / / component file reference};});}

The main thing this component does is to generate an array object containing only iframe pages according to the routes in main.ja.

Listen to $route on watch, determine that the current page is in the iframe page list, set the hasOpen property to true, and render the component.

Use vMurshow = "$route.path = item.path" to toggle between showing and hiding the iframe page.

After reading this, the article "how to achieve keep alive without refresh for iframe in Vue" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.