沙田镇网站建设公司,做网站算 自由职业者,企业网站开发期末报告,快速开发平台有哪些#xff08;以下示例皆是以vue3vitets项目为例#xff09;
场景一#xff1a;所有路由都可以进行缓存
在渲染路由视图对应的页面进行缓存设置#xff0c;代码如下#xff1a;
templaterouter-view v-slot{ Component, route }transiti…以下示例皆是以vue3vitets项目为例
场景一所有路由都可以进行缓存
在渲染路由视图对应的页面进行缓存设置代码如下
templaterouter-view v-slot{ Component, route }transition namerouter-fade modeout-inkeep-alivecomponent :isComponent :keyroute.fullPath //keep-alive/transition/router-view
/template
router-view用来渲染当前路由对应的视图。
v-slot 解构 router-view 的插槽属性来访问当前路由的组件(Component)和路由对象(route)。
transition用于实现页面路由切换时的过渡动画效果可省略。
namerouter-fade定义过渡动画类名为router-fade如router-fade-enter-active。modeout-in设置过渡模式为先出后进即新组件先渲染旧组件再离开
切记虽然vue3支持一个组件中有多个根节点但是transition不支持多个根节点否者页面无法正确显示例如打开缓存过的页面会出现白屏现象。
keep-alive用来缓存路由组件。
component用来动态渲染组件。
:isComponent表示要渲染的组件由 Component 变量决定。:keyroute.fullPath为组件添加唯一的键值确保路由发生变化时触发组件的重新渲染。
场景二动态设置可以缓存的路由
1. 在router中配置keepAlive设置支持缓存的页面例如
import { createRouter, createWebHistory, RouteRecordRaw } from vue-router;
import Layout from ../views/layout/index.vue;
const routes: ArrayRouteRecordRaw [{path: /,name: Layout,component: Layout,meta:{keepAlive:true //支持缓存}},{path: /about,name: About,component: () import(../views/about/index.vue),meta:{keepAlive:false //不支持缓存}},
];const router createRouter({history: createWebHistory(),routes
});export default router;
2. 在支持缓存的对应页面中设置name 此name必须于路由中设置的name一致。
script setup langts
// 使用 defineOptions 设置组件的 name 属性
defineOptions({name: Layout
});
/script
3.在渲染路由视图对应的页面进行缓存设置代码如下 相比场景一多了:includecachedViews的设置
templaterouter-view v-slot{ Component, route }transition namerouter-fade modeout-inkeep-alive :includecachedViewscomponent :isComponent :keyroute.fullPath //keep-alive/transition/router-view
/template
script setup langts
import {ref,watchEffect} from vue;
import { useRoute } from vue-router;
// 定义缓存的视图数组
const cachedViewsrefstring[]([])
const route useRoute();
// 监听路由变化
watchEffect(() {const name route.name as string;if (route.meta.keepAlive) {if (!cachedViews.value.includes(name)) cachedViews.value.push(name);} else {const index cachedViews.value.indexOf(name);if (index -1)cachedViews.value.splice(index, 1);}
});
/script
