輸入並搜尋
Limited time offer: Get 10 free Adobe Stock images.
ads via Carbon
Introduction
安装
基础
开始
动态路由匹配
嵌套路由
编程式导航
命名路由
命名视图
重定向 和 别名
向路由组件传递 props
HTML5 History 模式
进阶
导航守卫
路由元信息
过渡动效
数据获取
滚动行为
懒加载
API 文档
Router 构造配置
routes
mode
base
linkActiveClass
linkExactActiveClass
scrollBehavior
parseQuery / stringifyQuery
fallback
Router 实例
Properties
Methods
路由信息对象
对组件注入
router-link
router-view
本書使用 GitBook 釋出
EDIT THIS PAGE
过渡动效
过渡动效
<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

<transition>
<router-view></router-view>
</transition>
<transition> 的所有功能 在这里同样适用。

单个路由的过渡
上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 <transition> 并设置不同的 name。

const Foo = {
template: <transition name="slide"> <div class="foo">...</div> </transition>
}

const Bar = {
template: <transition name="fade"> <div class="bar">...</div> </transition>
}
基于路由的动态过渡
还可以基于当前路由与目标路由的变化关系，动态设置过渡效果：

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
<router-view></router-view>
</transition>
// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
查看完整例子请移步这里。