Home> Web Front-end> Vue.js> body text

How does vue implement partial refresh? (code example)

青灯夜游
Release: 2020-10-30 17:52:51
forward
3645 people have browsed it

How does vue implement partial refresh? (code example)

We all know that Vue’s componentization is its most powerful core, and routing is also a particularly cute part. However, routing is suitable for some large components. When you look at the URL path, you will Changes occur, but sometimes we want some small local refreshes. At this time, we need to use its dynamic components.

The element retained by Vue itself can dynamically bind the component to the is attribute, thereby conveniently realizing dynamic component switching.

The code is as follows: slotDome.vue:

  
Copy after login

simple1.vue:

Copy after login

simple2.vue:

Copy after login

In the above example, when the value of tabView changes, will render the corresponding component and route The effect is very similar, but the address bar has not changed

But in this way, each time the component is switched, it will be re-rendered, and the data on the component cannot be retained. At this time, you can use keep-alive to keep the component in memory to avoid re-rendering

The page effect is as follows:

How does vue implement partial refresh? (code example)

Related recommendations:

2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: 2020 latest 5 vue.js video tutorial selections

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of How does vue implement partial refresh? (code example). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
vue
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn