thème : condensé-nuit-violet
point culminant : a11y-dark
C'est le 6ème jour de ma participation à l'activité de création de notes d'accompagnement du "Cinquième camp d'entraînement des jeunes".
rester en vie
Cas : Après que l'utilisateur a cliqué sur le message, il passe à d'autres composants. En revenant à la page d'accueil, l'actualité sera affichée par défaut.
En effet, le composant par défaut sera détruit. Chaque fois que vous cliquez dessus, il s'agit d'un composant nouvellement créé, et non du composant précédent. Si vous souhaitez enregistrer cet état, vous devez utiliser keep-alive pour conserver l'état du composant contenu. , ou évitez de refaire le rendu
keep-alive est un composant intégré de Vue , qui peut conserver l'état du composant contenu ou éviter un nouveau rendu.
Ils ont deux propriétés très importantes :
include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存router-view est également un composant. S'il est directement enveloppé dans keep-alive, tous les composants de vue correspondant au chemin seront mis en cache :
keep-alive : un certain composant ne sera pas détruit après le saut de l'itinéraire vers la mémoire résidente, donc : les données du composant peuvent également être enregistrées. keep-alive garantit que les composants fréquemment utilisés ne seront pas fréquemment créés et détruits. vivant est en effet utile, comme Changer le texte en zone de texte, et les enregistrements de la zone de texte seront conservés
Vérifier via la fonction de cycle de création d'instructions
生命周期：在vue实例或vue组件里面定义许多函数，会在某一时刻回调这些函数
简单的说生命周期就是事件触发条件，就像click需要点击，而生命周期就是在代码运行过程中操作间隙运行生命周期中的代码
8个**生命周期函数**，创建、挂载、更新、销毁
组件被创建出来 后回调created函数
模板挂载到DOM上 后回调mounted函数
界面发生一次刷新 就调用一次updated函数
data中的数据发生改变的时候，渲染虚拟dom，应用更新accomplir
```js // app.vue // pas de succès
// 方案 // 关闭重定向 // 在home.vue中使用生命周期函数及导航守卫 // 这两个函数只有该组件被保持了状态，使用了keep-alive时，才有效 // activated deactivated activated () { // 活跃时调用 this.$router.push(this.path) console.log('activated'); }, // deactivated () { // 不活跃时调用 // console.log('deactivated'); // console.log(this.$route.path); // this.path = this.$route.path // // 这里记录的是跳转到的路由，不是跳转之前的 // }, beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用 // 可以访问组件实例'this' console.log(this.$route.path); this.path = this.$route.path next() }
```
- 1.生命周期函数回顾
- 2.keep-alive -> activated/deactivated
- 3.首页中使用path属性记录离开时的路径，在beforeRouteLeave中记录.
created也会重新渲染组件而你保存在data里面的值也会随着组件的渲染被初始化 不用keep-alive，使用created和组件内导航守卫也能实现需求
说一下我的理解，离开此组件时会触发一个函数，这个函数保存现在路由的地址在this.path里面，回到此组件时候又会调用一个活跃时函数，将之前保存的地址赋值一下
好像是这样，就是每一次切换路由的时候，上一个路由都会被销毁，keep-alive的作用是让不展示的路由组件保持挂载，不被销毁。比如说组件内的input输入框输入内容之后，希望可以被缓存，可以用这个
重要的属性:
include - 字符串或正则表达，只有匹配的组件会被缓存 exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
js <keep-alive exclude="Profile,User"> // 匹配的使用组件里的name属性 <router-view></router-view> </keep-alive> - 注意空格问题，正则表达式会匹配空格，css中calc()里面也有空格的问题出现 - 这个name可以直接在路由中添加，不用在vue页面里添加