怎样创造一个网站,网站打开太慢,广告设计与制作视频,国际最著名建筑设计大奖参考
vue动态组件#xff1c;Component#xff1e;与#xff1c;KeepAlive#xff1e;
KeepAlive官网介绍
缓存之keep-alive的理解和应用
Vue3Vite KeepAlive页面缓存问题
vue多级菜单(路由)导致缓存(keep-alive)失效
vue3 router-view keeperalive对于同一路径但路径…参考
vue动态组件Component与KeepAlive
KeepAlive官网介绍
缓存之keep-alive的理解和应用
Vue3Vite KeepAlive页面缓存问题
vue多级菜单(路由)导致缓存(keep-alive)失效
vue3 router-view keeperalive对于同一路径但路径参数不同 Vue keep-alive,同一个路由组件参数不同如何分别缓存状态 Vue路由 – 相同路由路径参数不同复用组件问题 文章目录 参考效果main.jsrouter.js App.vueHome.vueChat.vueChatDetail.vue 效果 main.js
import { createApp } from vueimport ./style.cssimport App from ./App.vue
import router from ./routerimport ElementPlus from element-plus
import element-plus/dist/index.cssconst app createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount(#app)router.js
import { createWebHistory, createRouter } from vue-routerimport Home from /views/Home.vue
import Chat from /views/Chat.vue
import ChatDetail from /views/ChatDetail.vueconst routes [{path: /,redirect: /home},{path: /home,name: home,component: Home},{path: /chat,name: chat,component: Chat,children: [{path: detail/:id,name: chatDetail,component: ChatDetail},]},
]
const router createRouter({history: createWebHistory(),routes,
})export default routerApp.vue
templatediv styleheight: 100%;div classheaderel-button clicknav(/home)/home/el-buttonel-button clicknav(/chat)/chat/el-buttonel-button clicknav(/chat/detail/1)/chat/detail/1/el-buttonel-button clicknav(/chat/detail/2)/chat/detail/2/el-buttondiv styleheight:100%;width:1px;background-color:#eee;margin: 10px;/div!-- 这里的缓存的意思是: 当从ChatDetail组件切到Home组件时, Chat组件实例里的数据还是否缓存 --el-button clickcachedComponents [Chat]缓存chat/el-buttonel-button clickcachedComponents []取消缓存chat/el-button{{cachedComponents}}/div!-- 当在home组件与chat组件切换时, 被切走的组件会被销毁, 切过去的组件会被创建 --!-- router-view classcontainer-wrapper/ --!-- home组件和chat组件都仅仅被创建了1次, 当在home组件与chat组件切换时, home组件与chat组件并未被销毁或创建 --!-- router-view v-slot{ Component }keep-alivecomponent :isComponent classcontainer-wrapper//keep-alive/router-view --!-- home组件仅被创建了1次并且切走时会被缓存下来不会被销毁, 切过来时不会重新创建; 而chat组件被切走会被销毁, 切到chat组件时, chat组件会被创建;这里的include指的是 组件名称, 而不是路由名称 --!-- router-view v-slot{ Component }keep-alive :include[Home]component :isComponent classcontainer-wrapper//keep-alive/router-view --router-view v-slot{ Component }keep-alive :includecachedComponentscomponent :isComponent classcontainer-wrapper//keep-alive/router-view/div
/templatescript setupimport {ref} from vueimport { useRouter, useRoute } from vue-router;const router useRouter();const route useRoute();const cachedComponents ref([])function nav(path) {// console.log(path);router.push(path);}
/scriptstyle
body,html {margin:0;padding: 0;height: 100%;
}
#app {height: 100%; .header {height: 51px;line-height: 51px;padding: 0 20px;border-bottom: 1px solid #eee;display: flex;align-items: center;justify-content: flex-start;} .container-wrapper {height: calc(100% - 52px);}
}
/style
Home.vue
templatediv classhomedivh1home/h1/div/div
/templatescript setup
import {ref, onActivated, onDeactivated ,onUnmounted} from vueimport {useRouter} from vue-router;// 获取路由器const router useRouter()console.log(【Home组件】创建);onUnmounted((){console.log(【Home组件】销毁);})/scriptstyle langscss
.home {width: 100%;display: flex;align-items: center;justify-content: center;
}
/styleChat.vue
templatediv classcontainerdiv classleftel-button clicknav(/home)/home/el-buttonel-button clicknav(/chat/detail/1)/chat/1/el-buttonel-button clicknav(/chat/detail/2)/chat/2/el-button/divdiv classright!-- router-view/ --!-- router-view v-slot{ Component }keep-alivecomponent :isComponent//keep-alive/router-view --!-- 这里给component添加1个key之后, 就可以根据路由路径来缓存组件实例了: 1个路由路径对应1个组件实例 --router-view v-slot{ Component }keep-alivecomponent :isComponent :keyroute.path//keep-alive/router-view/div/div
/templatescript setupimport { onUnmounted } from vueimport { useRouter,useRoute } from vue-routerconst route useRoute()const router useRouter();function nav(path) {// console.log(path);router.push(path);}console.log(【Chat组件】创建);onUnmounted((){console.log(【Chat组件】销毁);})
/scriptstyle langscss scoped
.container {display: flex;.left {width: 220px;border-right: 1px solid #eee;display: flex;flex-direction: column;align-items: center;padding-top: 10px;background-color: #f2f2f2;.el-button {margin-bottom: 10px;width: 80%;}}.right {flex: 1;padding: 20px;background-color: #e1e1e1;}
}
.el-button.el-button {margin-left: 0;
}
/styleChatDetail.vue
templatediv classchat-boxdiv classheaderh1会话{{route.params.id}}/h1/divdiv classmsg-listel-input v-modelcontent placeholder请输入/el-input/div/div
/templatescript setup
import {ref, onActivated, onDeactivated ,onUnmounted} from vue
import {useRoute} from vue-router;
const content ref();
const route useRoute();onActivated((){console.log(---【ChatDetail组件】激活---);
});
onDeactivated((){console.log(---【ChatDetail组件】取消激活---);
});console.log(---【ChatDetail组件】创建---);onUnmounted((){console.log(---【ChatDetail组件】销毁---);
})/scriptstyle langscss scoped.chat-box {display: flex;flex-direction: column;height: 100%;.msg-list {flex: 1;}}.header {border: 2px solid #eee;line-height: 68px;height: 68px;h1 {margin: 0;}}
/style
