Vueを使用したより高度なルーティング：Vueルーターを使用した移行

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

前回、高度な Vueルーターのトピックを取り上げ、ナビゲーションガードとリダイレクトについて説明しました。今回は、 Vue RouterTransitionsの実装方法に取り組みます。

Vue TransitionsについてはUnderstandingVue.js Transitions ですでに説明しているので、これを出発点として使用します。 VueRouterとtransitionsを組み合わせることで、ユーザーがカスタムのスタイルやアニメーションでアプリ内を移動する際のエクスペリエンスをカスタマイズできます。これは、多くの複雑なルートで大きくなるアプリでは重要です。

設定

これは高度なVueルーターテクニックに関する別の投稿であるため、基本的なセットアップに既に精通していることを前提としています。ただし、残りの投稿で使用する開始点を定義しましょう。

# Yarn
$ yarn add vue-router

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

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

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

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

components / Gator.vue

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

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

ルーターの移行

Vueルーターを使用すると、<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>

これで、GatorおよびSwampコンポーネントが、ナビゲートするときに左からスリッと出入りすることに気付くでしょう。

動的遷移

ルーターの遷移を動的に定義することもできます。これにより、/swampから離れてをナビゲートする場合にのみトランジションを追加できます。

スクリプト：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';
      }
    }
  }
}

次に、drain遷移を定義しましょう。

スタイル：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);
}

これで、離れる Swampのときだけ、drain離れて見えることがわかります🤓。

ルートごとの遷移

ルートごとにトランジションを適用することもできます。これは、ルートコンポーネントを<transition>でラップすることで実現できます。 Gatorを次のように変更したとします（App.vueの元の<transition>を必ず削除してください）。

components / Gator.vue

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

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

これで、のみで、/gatorに移動すると、slither遷移が動作していることがわかります。

まとめ

Vue Router トランジションは、次のレベルのユーザーエクスペリエンスを追加するのに最適です。アプリの見栄えを良くするだけでなく、トランジションは、ユーザーが複雑なルーター設定をナビゲートするのに役立ちます。ウィザードまたは本を実装している場合、ユーザーがページをめくっているように、コンポーネントを左または右に遷移させることができます。これにより、ユーザーはアプリ内のどこにいるのかを思い出すことができます。

getdocs

13036