免费服务器搭建网站详细教程,看设计比较好的网站,做招聘网站价格,老黄代码在Vue.js中#xff0c;使用路由的内置特性来控制组件的缓存#xff0c;以提高应用程序性能。默认情况下#xff0c;Vue Router不会缓存组件#xff0c;但你可以通过以下方式启用组件缓存#xff1a;
keep-alive 组件#xff1a;keep-alive 是Vue.js的内…在Vue.js中使用路由的内置特性来控制组件的缓存以提高应用程序性能。默认情况下Vue Router不会缓存组件但你可以通过以下方式启用组件缓存
keep-alive 组件keep-alive 是Vue.js的内置组件可以用来缓存被包裹的组件。你可以将需要缓存的组件包裹在keep-alive 标签内。例如
router-viewkeep-alivecomponent-to-cache/component-to-cache/keep-alive
/router-view//也可以变成
!-- 路由组件(缓存)标签include属性指定要缓存路由的组件名(缓存单个路由) --
keep-alive includeNews
!-- 路由显示标签 --router-view/router-view
/keep-alive
!-- 缓存多个路由组件 --
!-- keep-alive :include[News,Message]router-view/router-view
/keep-alive --在这个示例中component-to-cache 组件会被缓存当你导航到其他页面再返回时它的状态将保持不变。这样的情况我们实际在项目开发中经常会碰到这样的需求当我跳转到另一个页面的时候我想要返回到跳转到之前的页面就可以利用路由缓存组件来完成。
路由配置中启用缓存你也可以在Vue Router的路由配置中为特定路由启用缓存。通过在路由对象中使用 meta 属性你可以定义一个 keepAlive 属性来启用或禁用缓存。例如
const routes [{path: /some-route,component: SomeComponent,meta: {keepAlive: true, // 启用缓存},},// 其他路由配置
];在这种情况下当导航到 /some-route 时SomeComponent 组件将被缓存。
利用vue第12篇 中的Home.vue文件
templatedivh2Home组件内容/h2divul classnav nav-tabslirouter-link classlist-group-item active-classactive to/home/newsNews/router-link/lilirouter-link classlist-group-item active-classactive to/home/messageMessage/router-link/li/ul!-- 路由组件(缓存)标签include属性指定要缓存路由的组件名(缓存单个路由) --keep-alive includeNews!-- 路由显示标签 --router-view/router-view/keep-alive!-- 缓存多个路由组件 --!-- keep-alive :include[News,Message]router-view/router-view/keep-alive --/div/div
/templatescriptexport default {name: Home}
/scriptstyle/stylevue的activated和deactivated生命周期钩子
“activated” 和 “deactivated” 是组件的生命周期钩子用于管理组件在激活和停用时的行为。这些钩子通常与Vue组件的路由相关用于处理路由切换时的特定操作。
activated钩子当一个使用Vue Router的路由进入到包含该组件的路由时activated钩子会被触发。这通常用于执行需要在组件激活时进行的操作例如数据加载或动画启动。例如你可以在activated钩子中加载组件所需的数据。
export default {activated() {// 在组件被激活时执行的代码},
}deactivated钩子当一个路由离开包含该组件的路由时deactivated钩子会被触发。这通常用于执行需要在组件停用时进行的清理操作例如取消订阅或释放资源。
export default {deactivated() {// 在组件被停用时执行的代码},
}这些钩子允许你在路由切换时管理组件的状态和行为以提供更好的用户体验。请注意这些钩子只在使用Vue Router进行路由管理时才会生效如果你没有使用Vue Router这些钩子可能不会生效 News.vue
templateulli :style{opacity}欢迎学习Vue/lilinews001 input typetext value//lilinews002 input typetext value//lilinews003 input typetext value//li/ul
/templatescriptexport default {name:News,data() {return {opacity:1}},// beforeDestroy(){// console.log(News组件即将被销毁了);// clearInterval(this.timer);// },// mounted(){// this.timersetInterval(() {// console.log();// this.opacity-0.01;// if (this.opacity0) {// this.opacity1;// }// }, 16);// }activated(){//新的生命周期钩子函数是路由组件独有的(激活路由的意思)console.log(News组件被激活了);this.timersetInterval(() {this.opacity-0.01;if (this.opacity0) {this.opacity1;}}, 16);},deactivated(){//路由组件独有的生命周期钩子函数(取消激活路由的意思)console.log(News组件失活了);clearInterval(this.timer);}}
/scriptstyle/style
