38 lines
1.4 KiB
Markdown
38 lines
1.4 KiB
Markdown
# PageTransition 页面过渡
|
|
|
|
为 Vue Router 页面提供可配置的页面过渡和按路由缓存能力。
|
|
|
|
## 基础用法
|
|
|
|
`PageTransition` 必须放在 `RouterView` 所在的路由布局中，并且自身需要有明确的宽高。
|
|
|
|
```vue
|
|
<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"`。
|
|
|
|
## API
|
|
|
|
<api-table name="PageTransition" />
|