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
Table of contents 1. Enter a directory and create...
This article example shares the specific code of ...
Table of contents Preface 1. Prepare new partitio...
Preface When backing up the database, a full data...
Communication between containers 1. Network shari...
Table of contents 1. Download WeChat developer to...
I personally feel that the development framework ...
After learning the basic operations of Docker, we...
To transfer files between the host and the contai...
Method 1: Download Pycharm and install Download a...
Preface For a data-centric application, the quali...
Table of contents Preface 【undo log】 【redo log】 【...
hash mode (default) Working principle: Monitor th...
Table of contents Usage scenarios Solution 1. Use...
1. Requirements When using the Vue.js framework t...