This article mainly introduces the switching of components in Vue and the cache solution 1. Component switching methodMethod 1: Use v-if and v-else// When the variable flag is true, the comp-a component is displayed, otherwise the comp-b component is displayed <comp-a v-if="flag"></comp-a> <comp-b v-else></comp-b> Method 2: Use built-in components: <component></component>// Click to switch login, registration, exit components <template> <div> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">Login</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">Register</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">Log Out</a> // <component></component> to display the component with the corresponding name, which is equivalent to a placeholder // The :is attribute specifies the component name <component :is="comName"></component> </div> </template> Method 3: vue-router// Routing rules: { path: '/login', name: 'login', component: () => import('../views/login.vue') }, { path: '/register', name: 'register', component: () => import('../views/register.vue') }, //Where to display the component: <router-view /> 2. Component caching: keep-aliveCache components as needed, rather than destroying and rebuilding them, as in the actual scenario at the beginning of this article 1.Keep-alive definition When <keep-alive> is an abstract component: it does not render a DOM element itself, nor does it appear in the parent component chain. When a component is switched within 2.Keep-alive life cycleactivated Called when the deactivated This hook is called when the Components created in
Components that have cache set up:
3. How to use keep-alive1. Props 2. Use with <component></component><template> <div> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">Login</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">Register</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">Log Out</a> // The login component will be cached. If include is not set, all components mounted to <component></component> will be cached by default. // Cache multiple specified components include = ['login', 'register'] <keep-alive include="login"> <component :is="comName"></component> </keep-alive> </div> </template> 3. Use with <router-view /> routing The { path: '/login', name: 'login', component: () => import('../views/login.vue') meta:{ keepAlive : true // login component will be cached} }, { path: '/register', name: 'register', component: () => import('../views/register.vue'), meta:{ keepAlive : false // register component will not be cached} }, <router-view />: <div id="app"> <keep-alive> <!-- View components that need to be cached--> <router-view v-if="$route.meta.keepAlive"> </router-view> </keep-alive> <!-- View components that do not need caching --> <router-view v-if="!$route.meta.keepAlive"> </router-view> </div> 4. Clear cache components// beforeRouteLeave() hook // Determine whether to go to the details page beforeRouteLeave(to, from, next) { if (to.path === "/goods_detail") { from.meta.keepAlive = true; } else { from.meta.keepAlive = false; // this.$destroy() } next(); } This is the end of this article about vue component switching, dynamic components, and component caching. For more relevant vue component switching, dynamic components, and component caching content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Introduction to MySQL role functions
>>: How to choose and use PNG, JPG, and GIF as web image formats
When browser vendors bend the standards and take i...
Table of contents Prefab How to create a prefab T...
Table of contents 1. Introduction 2. Install Dock...
The local environment is Windows 10 + WSL2 (Ubunt...
Table of contents Hidden Problems Solution to ada...
<br />Original URL: http://www.lxdong.com/po...
vue+el-upload multiple files dynamic upload, for ...
html: In fact, it is to arrange several solid cir...
Table of contents 1. JavaScript is single-threade...
1. Differences between JSON.stringify() and JSON....
Background Recently, I encountered such a problem...
Preface Learn MySQL to reorganize previous non-MK...
This article example shares the specific code of ...
Install MySQL for the first time on your machine....
Table of contents 1. Inline styles 2. Use import ...