当前位置:网站首页>keep-alive
keep-alive
2022-07-05 15:21:00 【Shepherd Wolf】
app.vue:
Need one : When all pages jump to the home page , Cache all home pages ( Do not reload )
router/index.js:
Demand two :list When you jump to the home page , Reload the homepage ;about When you jump to the home page , Home page does not reload
【 Implementation steps 】:
1. The route of the home page : Get rid of the dead meta.keepAlive;
2. Inside other page components : In the navigation guard when the page leaves , Dynamically add the target page keepAlive Value
router/index.js:
list.vue:
about.vue:
Now? , So let's verify that ( page mounted Hook printing 111), Change the input box of the home page to :zhang.
Click to list page , Then return to the home page , I found that the input box changed back :zhangsan, And mounted Printed 111 Print again , explain : Page reload , Not cached
Then click about page , Then return to the home page , Find that the input box changes to :zhang, And mounted Not executed again , explain : Page not reloaded , Cached
app.vue:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/list">List</router-link> |
<router-link to="/about">About</router-link>
</div>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
边栏推荐
- How can the boss choose programmers to help me with development?
- easyOCR 字符识别
- Common PHP interview questions (1) (written PHP interview questions)
- queryRunner. Query method
- P6183 [USACO10MAR] The Rock Game S
- Ecotone technology has passed ISO27001 and iso21434 safety management system certification
- Aike AI frontier promotion (7.5)
- 数据库学习——数据库安全性
- I collect multiple Oracle tables at the same time. After collecting for a while, I will report that Oracle's OGA memory is exceeded. Have you encountered it?
- No one consults when doing research and does not communicate with students. UNC assistant professor has a two-year history of teaching struggle
猜你喜欢
Change multiple file names with one click
729. My schedule I: "simulation" & "line segment tree (dynamic open point) &" block + bit operation (bucket Division) "
把 ”中台“ 的思想迁移到代码中去
MySQL----函数
Number protection AXB function! (essence)
Misc Basic test method and knowledge points of CTF
P6183 [USACO10MAR] The Rock Game S
12 MySQL interview questions that you must chew through to enter Alibaba
Mongdb learning notes
Install and configure Jenkins
随机推荐
[12 classic written questions of array and advanced pointer] these questions meet all your illusions about array and pointer, come on!
Garbage collection mechanism of PHP (theoretical questions of PHP interview)
Bugku easy_ nbt
The elimination strategy of redis
1330:【例8.3】最少步数
Install PHP extension spoole
计算中间件 Apache Linkis参数解读
I spring and autumn blasting-2
How to solve the problem of garbled code when installing dependency through NPM or yarn
lv_font_conv离线转换
Interview shock 62: what are the precautions for group by?
Redis' transaction mechanism
把 ”中台“ 的思想迁移到代码中去
Leetcode: Shortest Word Distance II
美团优选管理层变动:老将刘薇调岗,前阿里高管加盟
SQL Server learning notes
Aike AI frontier promotion (7.5)
[JVM] operation instruction
P1451 calculate the number of cells / 1329: [example 8.2] cells
Type declaration of all DOM elements in TS