vue路由过渡_使用Vue进行更高级的路由：使用Vue路由器进行过渡

vue路由过渡

Last time we covered advanced Vue Router topics we discussed Navigation Guards and Redirects. This time we’ll be tackling how to implement Vue Router Transitions.

上一次我们讨论Vue路由器的高级主题时，我们讨论了导航保护和重定向 。 这次我们将探讨如何实现Vue Router Transitions 。

We’ve already covered Vue Transitions in Understanding Vue.js Transitions, so we’ll use that as a starting point. Combining Vue Router with transitions will allow us to customize the user’s experience while they navigate throughout our app with custom styling or animations. This is important with apps that grow large with many complex routes.

我们已经在了解Vue.js Transitions中介绍了Vue Transitions ，因此我们将以此为起点。 将Vue Router与过渡结合使用，我们可以在用户使用自定义样式或动画浏览整个应用程序时自定义用户的体验。 这对于具有许多复杂路线的大型应用程序来说非常重要。

建立 (Setup)

Since this is another post about advanced Vue Router techniques, we’ll assume you’re already familiar with the basic setup. However, let’s define a starting point that we’ll use for the rest of the post:

由于这是有关高级Vue路由器技术的另一篇文章，因此我们假设您已经熟悉基本设置。 但是，让我们定义一个起点，我们将在本文的其余部分中使用该起点：

# Yarn
$ yarn add vue-router

# or npm
$ npm install vue-router --save

main.js

main.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import App from './App';
import Swamp from './components/Swamp';
import Gator from './components/Gator';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp },
    { path: '/gator', component: Gator }
  ]
});

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App.vue

应用程序

<template>
  <div id="app">
    <div class="nav">
      <router-link to="/swamp">Swamp</router-link> |
      <router-link to="/gator">Gator</router-link>
    </div>
    <hr />
    <div class="router-view">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default { name: 'App' }
</script>

components/Swamp.vue

组件/Swamp.vue

<template>
  <div>Welcome to the Swamp!</div>
</template>

<script>
export default { name: 'Swamp' }
</script>

components/Gator.vue

组件/Gator.vue

<template>
  <div>Howdy, Gator!</div>
</template>

<script>
export default { name: 'Gator' }
</script>

路由器转换 (Router Transitions)

The Vue Router allows us to wrap our <router-view> component with the <transition> component. This enables transitions when navigating both to and from our route components.

Vue路由器允许我们用<transition>组件包装<router-view> <transition>组件。 这样可以在导航至路线组件和从路线组件导航时进行转换 。

App.vue

应用程序

<template>
  <div id="app">
    <div class="nav">
      <router-link to="/swamp">Swamp</router-link> |
      <router-link to="/gator">Gator</router-link>
    </div>
    <hr />
    <div class="router-view">
      <transition name="slither">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
export default { name: 'App' }
</script>

<style>
.slither-enter-active, .slither-leave-active {
  transition: transform 1s;
}

.slither-enter, .slither-leave-to {
  transform: translateX(-100%);
}

.slither-enter-to, .slither-leave {
  transform: translateX(0);
}
</style>

Now you’ll notice the Gator and Swamp components slither in and out from the left when navigating!

现在，您会发现Gator和Swamp组件在导航时从左侧滑入和滑出！

动态过渡 (Dynamic Transitions)

We can also define router transitions dynamically. This would allow us to add a transition only when navigating away from /swamp:

我们还可以动态定义路由器转换。 这将使我们仅在离开 /swamp时才添加过渡 ：

Script: App.vue

脚本：App.vue

export default {
  name: 'App',
  data () {
    return { transitionName: null }
  },
  watch: {
    '$route' (to, from) {
      if (from.path === '/swamp') {
        this.transitionName = 'drain';
      } else {
        this.transitionName = 'slither';
      }
    }
  }
}

Now let’s define the drain transition:

现在让我们定义drain过渡：

Style: App.vue

风格：App.vue

.slither-enter-active, .slither-leave-active {
  transition: transform 1s;
}

.slither-enter, .slither-leave-to {
  transform: translateX(-100%);
}

.slither-enter-to, .slither-leave {
  transform: translateX(0);
}

.drain-enter-active, .drain-leave-active {
  transition: transform 1s;
}

.drain-enter, .drain-leave-to {
  transform: translateY(100%);
}

.drain-enter-to, .drain-leave {
  transform: translateY(0);
}

Now we’ll see that only when leaving Swamp we’ll see it drain away 🤓.

现在，我们将看到只有离开 Swamp我们才会看到它drain 🤓。

每条路线的过渡 (Per-route transitions)

We could also apply transitions on a per-route basis. We can accomplish this by wrapping a route component with <transition>. Let’s say we modified Gator as follows (making sure to remove the original <transition> in App.vue):

我们还可以在每个路由的基础上应用过渡。 我们可以通过用<transition>包装路径组件来完成此操作。 假设我们修改了Gator如下(确保删除App.vue原始的<transition> )：

components/Gator.vue

组件/Gator.vue

<template>
  <transition name="slither">
    <div>Howdy, Gator!</div>
  </transition>
</template>

<script>
export default { name: 'Gator' }
</script>

Now, only when navigating to /gator will we see our slither transition in action.

现在， 只有导航到/gator时，我们才能看到更slither过渡。

结语 (Wrapping Up)

Vue Router transitions are great for adding next-level user experiences. Not only can we make our apps look cool, but transitions can also aid in helping the user navigate a complex router setup. If we were implementing a wizard or a book, we could have components transition to the left or right as if the user were turning pages. This helps the user remember where they are in your app!

Vue路由器过渡非常适合添加下一级用户体验。 我们不仅可以使我们的应用看起来很酷，而且过渡还可以帮助用户导航复杂的路由器设置。 如果我们要实现一个向导或一本书，我们可以使组件向左或向右过渡，就像用户在翻页一样。 这可以帮助用户记住他们在你的应用程序！

翻译自: https://www.digitalocean.com/community/tutorials/vuejs-vue-routing-transitions

vue路由过渡