上次我们涵盖了先进的Vue路由器主题,我们讨论了 导航警卫和重定向。
我们已经在 理解 Vue.js 过渡中涵盖了 Vue Transitions,所以我们将使用这一点作为一个起点。 将 Vue Router 与过渡相结合,将使我们能够在使用自定义风格或动画在我们的应用程序中导航时定制用户体验。
设置
由于这是关于高级Vue路由器技术的另一个帖子,我们将假设你已经熟悉基本的设置,但是,让我们定义一个起点,我们将用于该帖子的其余部分:
1# Yarn
2$ yarn add vue-router
3
4# or npm
5$ npm install vue-router --save
1[label main.js]
2import Vue from 'vue';
3import VueRouter from 'vue-router';
4
5import App from './App';
6import Swamp from './components/Swamp';
7import Gator from './components/Gator';
8
9Vue.use(VueRouter);
10
11const router = new VueRouter({
12 routes: [
13 { path: '/swamp', component: Swamp },
14 { path: '/gator', component: Gator }
15 ]
16});
17
18new Vue({
19 render: h => h(App),
20 router
21}).$mount('#app')
1[label App.vue]
2<template>
3 <div id="app">
4 <div class="nav">
5 <router-link to="/swamp">Swamp</router-link> |
6 <router-link to="/gator">Gator</router-link>
7 </div>
8 <hr />
9 <div class="router-view">
10 <router-view></router-view>
11 </div>
12 </div>
13</template>
14
15<script>
16export default { name: 'App' }
17</script>
1[label components/Swamp.vue]
2<template>
3 <div>Welcome to the Swamp!</div>
4</template>
5
6<script>
7export default { name: 'Swamp' }
8</script>
1[label components/Gator.vue]
2<template>
3 <div>Howdy, Gator!</div>
4</template>
5
6<script>
7export default { name: 'Gator' }
8</script>
路由器过渡
Vue Router 允许我们将我们的<router-view>组件包装到<transition>组件中,从而在导航到我们的路线组件时实现过渡。
1[label App.vue]
2<template>
3 <div id="app">
4 <div class="nav">
5 <router-link to="/swamp">Swamp</router-link> |
6 <router-link to="/gator">Gator</router-link>
7 </div>
8 <hr />
9 <div class="router-view">
10 <transition name="slither">
11 <router-view></router-view>
12 </transition>
13 </div>
14 </div>
15</template>
16
17<script>
18export default { name: 'App' }
19</script>
20
21<style>
22.slither-enter-active, .slither-leave-active {
23 transition: transform 1s;
24}
25
26.slither-enter, .slither-leave-to {
27 transform: translateX(-100%);
28}
29
30.slither-enter-to, .slither-leave {
31 transform: translateX(0);
32}
33</style>
现在你会注意到Gator和Swamp组件在导航时从左侧滑动而出!
动态转型
我们还可以动态定义路由器过渡,这将允许我们只在从/swamp中导航 away时添加过渡:
1[label Script: App.vue]
2export default {
3 name: 'App',
4 data () {
5 return { transitionName: null }
6 },
7 watch: {
8 '$route' (to, from) {
9 if (from.path === '/swamp') {
10 this.transitionName = 'drain';
11 } else {
12 this.transitionName = 'slither';
13 }
14 }
15 }
16}
现在,让我们定义排水过渡:
1[label Style: App.vue]
2.slither-enter-active, .slither-leave-active {
3 transition: transform 1s;
4}
5
6.slither-enter, .slither-leave-to {
7 transform: translateX(-100%);
8}
9
10.slither-enter-to, .slither-leave {
11 transform: translateX(0);
12}
13
14.drain-enter-active, .drain-leave-active {
15 transition: transform 1s;
16}
17
18.drain-enter, .drain-leave-to {
19 transform: translateY(100%);
20}
21
22.drain-enter-to, .drain-leave {
23 transform: translateY(0);
24}
现在我们会看到,只有当我们离开垃圾时,我们才会看到它流出。
路由过渡
我们可以通过将路由组件包装为<transition>来实现这一点,假设我们如下修改了Gator(确保在App.vue中删除原始的<transition>):
1[label components/Gator.vue]
2<template>
3 <transition name="slither">
4 <div>Howdy, Gator!</div>
5 </transition>
6</template>
7
8<script>
9export default { name: 'Gator' }
10</script>
现在,只在导航到/gator时,我们将看到我们的滑落过渡在行动中。
包装上
Vue Router 过渡非常适合添加下一个级别的用户体验,我们不仅可以让我们的应用看起来很酷,还可以帮助用户导航复杂的路由器设置。