1.4 KiB
1.4 KiB
PageTransition 页面过渡
为 Vue Router 页面提供可配置的页面过渡和按路由缓存能力。
基础用法
PageTransition 必须放在 RouterView 所在的路由布局中，并且自身需要有明确的宽高。
<template>
<div class="layout">
<page-transition :keep-alive="route => route.meta.keepAlive === true" />
</div>
</template>
<style scoped lang="less">
.layout {
height: 100vh;
}
</style>
组件默认根据路由层级选择 push-left 和 push-right。层级的解析顺序是：transitionDepth query、depth meta、动态层级 meta，最后回退到 matched.length。业务路由结构特殊时，直接传入 get-route-depth，不要让组件猜测业务规则。
缓存页面
keep-alive 支持布尔值或路由谓词。谓词返回 true 的页面会进入缓存，keep-alive-max 用于限制缓存数量。默认不缓存页面，避免通用布局意外保留业务表单状态。
自定义过渡
transition 默认值为 auto，也可以传入 false 禁用过渡、传入字符串使用自定义过渡名，或传入函数按目标路由和来源路由返回过渡名。组件内置 push-left、push-right 和 fade。
组件默认尊重系统的“减少动态效果”设置；如果业务必须保持页面翻页动画，可以设置 :respect-reduced-motion="false"。