Web Design Leaves

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

// createRouter メソッドでルーターを生成
const router = createRouter({
  // History の実装方法を指定（history オプション）
  history: createWebHistory(import.meta.env.BASE_URL),
  // ルーティングの定義（routes オプション）
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

//生成したルーターをデフォルトエクスポート
export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  //ルーターを router/index.js からインポート

import './assets/main.css'  //CSS のインポート

const app = createApp(App)  //Vue のインスタンスを生成

app.use(router)  //Vue のインスタンスにルーターをインストールして有効化

app.mount('#app')

<script setup>
// RouterLink コンポーネントと RouterView コンポーネントをインポート
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" />
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <nav>
        <!-- リンクには RouterLink コンポーネントを使い、リンク先を to プロパティに指定 -->
        <!-- デフォルトで <RouterLink> は <a> タグとして描画される -->
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>
  <!-- ルートとマッチしたコンポーネントが RouterView コンポーネントへ描画される -->
  <RouterView />
</template>

<style scoped>
・・・中略・・・
/* 完全一致する現在のページを表すアクティブなリンク */
nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}
 ・・・中略・・・
</style>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" />
    <div class="wrapper">
      <hello-world msg="You did it!" />
      <nav>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </nav>
    </div>
  </header>
  <router-view />
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/');
    }
  }
}
</script>

<template>
  <div class="about">
    <h1>This is an about page </h1>
    <button type="button" v-on:click="goToHome">Home</button>
  </div>
</template>

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button type="button" v-on:click="$router.push('/')">Home</button>
  </div>
</template>

<script setup>
// useRouter をインポート
import { useRouter } from 'vue-router';
// router オブジェクトを取得
const router = useRouter();
// イベントハンドラを定義
const goToHome = () => router.push('/');
</script>

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
     <button type="button" v-on:click="goToHome">Home</button>
    </div>
  </div>
</template>

<script setup>
// router をインポート
import router from '@/router';
// イベントハンドラを定義
const goToHome = () => router.push('/');
</script>

<script>
// useRouter をインポート
import { useRouter } from 'vue-router';
export default {
  setup() {
    // router オブジェクトを取得
    const router = useRouter();
    const goToHome = () => router.push('/');
    return { goToHome };
  }
}
</script>

<RouterLink to="パス" replace>xxxx</RouterLink>
<RouterLink v-bind:to="式（オブジェクト）" replace>xxxx</RouterLink>

router.push({ path: '/home', replace: true });
// 以下と同じ
router.replace({ path: '/home' });
// または
router.replace('/home');

// 1つ先へ進める。router.forward() と同じ
router.go(1)

// 1つ前に戻す。router.back() と同じ
router.go(-1)

// 3つ先へ進める
router.go(3)

// もし指定した数の履歴が存在しない場合、サイレントに失敗します（エラーは出ません）
router.go(-100)
router.go(100)

<script>
export default {
  data() {
    return {
      //uid を受け取ってデータを作成
      userId: this.$route.params.uid
    }
  },
  created() {
    //created フックで値を更新（但し、これは呼ばれないので更新されない）
    this.userId = this.$route.params.uid;
  },
}
</script>

<template>
  <div class="user">
    <h1>User : {{ $route.params.uid }}</h1>
    <p>User ID  : {{ userId }}</p>
  </div>
</template>

<script setup>
//ref メソッドをインポート
import { ref } from 'vue';
//useRoute メソッドをインポート
import { useRoute } from 'vue-router';
//route インスタンス（$route）を取得
const route = useRoute();
//ref メソッドでリアクティブな変数 userId を定義
const userId = ref(route.params.uid);
</script>

<template>
  <div class="user">
    <h1>User : {{ $route.params.uid }}</h1>
    <p>User ID  : {{ userId }}</p>
  </div>
</template>

{
  path: '/user/:uid',  //:uid を配置
  name: 'user',
  component: () => import('../views/UserView.vue')
}

<nav>
  <RouterLink to="/">Home</RouterLink>
  <RouterLink to="/about">About</RouterLink>
  <RouterLink to="/user/001/foo">User 001</RouterLink>
  <RouterLink to="/user/009/foo">User 009</RouterLink>
</nav>

<script>
export default {
  data() {
    return {
      userId: this.$route.params.uid
    }
  },
  created() {
    this.userId = this.$route.params.uid;
  },
  // watch オプションを追加
  watch: {
    $route(to) {
      this.userId = to.params.uid;
    }
  },
}
</script>

<script setup>
// watch をインポート
import { watch, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const userId = ref(route.params.uid);

// watch メソッド
watch(
  route, // $route オブジェクトを監視
  (to) => {
    userId.value = to.params.uid;
  }
)
</script>

//$route オブジェクトの params プロパティを監視する場合
watch(
  () => route.params, // params プロパティを監視
  (toParams) => {
    userId.value = toParams.uid;
  }
)
//または uid のみ監視する場合
watch(
  () => route.params.uid, // uid を監視
  (toUid) => {
    userId.value = toUid;
  }
)

<script setup>
//watch, ref メソッドをインポート
import { watch, ref } from 'vue';
//useRoute メソッドをインポート
import { useRoute } from 'vue-router';
//route インスタンスを取得
const route = useRoute();
//ref メソッドでユーザー情報を入れるリアクティブな変数（ref）を初期化
const user = ref({});
//パラメータ uid の文字列を整数に変換
let userId = parseInt(route.params.uid);
//API から fetch() でユーザー情報を取得して変数に代入する関数
const fetchUser = async (url) => {
  //API からユーザー情報を取得
  const response = await fetch(url);
  //取得したレスポンスを json に変換
  const data = await response.json();
  //user（ref）の value プロパティに、取得したデータを代入
  user.value = data;
};
//API の URL（ユーザーの ID 部分を除く）
const targetUrl = 'https://jsonplaceholder.typicode.com/users/';
//引数に渡す URL を userId を使って作成して上記関数を実行
fetchUser(targetUrl + userId);

// params を監視して更新（以下の記述がないとページ遷移の際に更新されない）
watch(
  () => route.params,
  (toParams) => {
    // 変更があれば uid を整数に変換して fetchUser() を実行
    userId =  parseInt(toParams.uid);
    fetchUser(targetUrl + userId);
  }
)
</script>

<template>
  <div class="user">
    <h1>User : {{ route.params.uid}}</h1>
    <ul>
      <li>Name : {{ user.name }}</li>
      <li>Email : {{ user.email }}</li>
      <li>Phone : {{ user.phone }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
//onBeforeRouteUpdate メソッドをインポート
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
const route = useRoute();
const user = ref({});
let userId = parseInt(route.params.uid);
const fetchUser = async (url) => {
  const response = await fetch(url);
  const data = await response.json();
  user.value = data;
};

const targetUrl = 'https://jsonplaceholder.typicode.com/users/';
fetchUser(targetUrl + userId);

// watch の代わりに beforeRouteUpdate ナビゲーションガードを利用
onBeforeRouteUpdate(async (to) => {
  userId =  parseInt(to.params.uid);
  fetchUser(targetUrl + userId);
});
</script>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    ・・・中略・・・
    // Not Found（404）へのルート
    {
      path: '/:pathMatch(.*)*',  //すべてに一致するパス
      name: 'NotFound',
      component: () => import('../views/NotFoundView.vue')
    },
  ],
})
export default router

<template>
  <div class="not-found">
    <h1>404 Not Found</h1>
    <p>指定したページは存在しません。</p>
    <p><RouterLink v-bind:to="{ name: 'home' }">ホーム</RouterLink></p>
    <!-- <p>:pathMatch(.*)* の値：{{ $route.params.pathMatch }}</p>（確認用）-->
  </div>
</template>

const routes = [
  //  /o/3549 や /o/foo などにマッチ
  { path: '/o/:orderId', ... },
  // /p/books や /p/123 などにマッチ
  { path: '/p/:productName', ... },
]

const routes = [
  // /:orderId -> /25 や /123 などの数値のみにマッチ（ \\d+ は１つ以上の数値 ）
  { path: '/:orderId(\\d+)', ... },
  // /:productName -> 何にでもマッチ
  { path: '/:productName', ... },
]

{
  path: '/user/:uid(\\d{1,3})',
  name: 'user',
  component: () => import('../views/UserView.vue')
},

const routes = [
  // /:chapters ->  /one, /one/two, /one/two/three, などにマッチ（/ にはマッチしない）
  { path: '/:chapters+', ... },
  // /:chapters ->  /, /one, /one/two, /one/two/three,などにマッチ
  { path: '/:chapters*', ... },
]

const routes = [
  //  /1, /1/2, /1/2/3, などにマッチ
  { path: '/:chapters(\\d+)+', ... },
  //  /, /1, /1/2, /1/2/3 などにマッチ
  { path: '/:chapters(\\d+)*', ... },
]

const routes = [
  //  /users や /users/posva にマッチ
  { path: '/users/:userId?' },
  //  /users や /users/42 にマッチ
  { path: '/users/:userId(\\d+)?' },
]

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/users/:id', sensitive: true, ... },
    { path: '/users/:id?', ... },
  ],
  strict: true, // 全てのルートに適用（router レベル）
})

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
      ・・・中略・・・
      {
        path: '/user/:uid',
        name: 'user',  // 警告が表示される
        component: () => import('../views/UserView.vue'),
        children: [
          {
            //空のネストされたパスを指定
            path: '',
            component:  () => import('../views/UserHome.vue'),
          },
          {
            path: 'profile',
            component:  () => import('../views/UserProfile.vue'),
          },
          {
            path: 'posts',
            component:  () => import('../views/UserPosts.vue'),
          },
        ],
      },
    ],
  })
  

<RouterLink :to="{ name: 'user', params: { uid: '009' }}">User 009</RouterLink>

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
      ・・・中略・・・
      {
        path: '/user/:uid',
        component: () => import('../views/UserView.vue'),
        children: [
          {
            //空のネストされたパス
            path: '',
            name: 'user',  // 親の name プロパティを子に移動
            component:  () => import('../views/UserHome.vue'),
          },
          {
            path: 'profile',
            component:  () => import('../views/UserProfile.vue'),
          },
          {
            path: 'posts',
            component:  () => import('../views/UserPosts.vue'),
          },
        ],
      },
    ],
  })
  

{
  path: '/user/:uid',
  name: 'user', // name プロパティを指定
  component: () => import('../views/UserView.vue'),
  children: [
    {
      //空のネストされたパス
      path: '',
      name: 'user-home', // name プロパティを指定
      component:  () => import('../views/UserHome.vue'),
    },
    {
      path: 'profile',
      component:  () => import('../views/UserProfile.vue'),
    },
    {
      path: 'posts',
      component:  () => import('../views/UserPosts.vue'),
    },
  ],
},

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/user/:uid',
      //親ルートのコンポーネント（これにナビゲーションリンクを追加）
      component: () => import('../views/UserView.vue'),
      //子ルート
      children: [
        {
          //既定で描画するネストされたコンポーネントのルート
          path: '',
          name: 'user',
          component:  () => import('../views/UserHome.vue'),
        },
        {
          path: 'profile',
          component:  () => import('../views/UserProfile.vue'),
        },
        {
          path: 'posts',
          component:  () => import('../views/UserPosts.vue'),
        },
      ],
    },
  ],
})
export default router

<template>
  <div class="user">
    <h1>User : {{ $route.params.uid}}</h1>
    <!-- ナビゲーションリンク -->
    <RouterLink :to="`/user/${$route.params.uid}/profile`">Profile</RouterLink> |
    <RouterLink :to="`/user/${$route.params.uid}/posts`">Posts</RouterLink>
    <RouterView />
  </div>
</template>

{
  path: '/user/:uid',
  component: () => import('../views/UserView.vue'),
  //props オプションを追加してパラメータをコンポーネントの props に引き渡す
  props: true,
  children: [
    {
      path: '',
      name: 'user',
      component:  () => import('../views/UserHome.vue'),
    },
    {
      path: 'profile',
      component:  () => import('../views/UserProfile.vue'),
    },
    {
      path: 'posts',
      component:  () => import('../views/UserPosts.vue'),
    },
  ],
},

<script setup>
              //パラメータを受け取る props を定義
const props = defineProps({
  uid: String
});
</script>

<template>
  <div class="user">
    <h1>User : {{ uid }}</h1>
    <!-- ナビゲーションメニュー -->
    <RouterLink :to="`/user/${uid}/profile`">Profile</RouterLink> |
    <RouterLink :to="`/user/${uid}/posts`">Posts</RouterLink>
    <RouterView />
  </div>
</template>

{
  path: '/user/:uid',
  component: () => import('../views/UserView.vue'),
  props: true, //パラメータを props として渡す
  children: [
    {
      path: '',
      name: 'user',
      component:  () => import('../views/UserHome.vue'),
    },
    {
      path: 'profile',
      //名前を追加
      name: 'user-profile',
      component:  () => import('../views/UserProfile.vue'),
    },
    {
      path: 'posts',
      //名前を追加
      name: 'user-posts',
      component:  () => import('../views/UserPosts.vue'),
    },
  ],
},

<script setup>
const props = defineProps({
  uid: String
});
</script>

<template>
  <div class="user">
    <h1>User : {{ uid }}</h1>
    <!-- ナビゲーションメニュー -->
    <RouterLink :to="{ name: 'user-profile', params: { uid: uid }}">
      Profile
    </RouterLink> |
    <RouterLink :to="{ name: 'user-posts', params: { uid: uid }}">
      Posts
    </RouterLink>
    <RouterView />
  </div>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/user/:uid',
      name: 'user',
      component: () => import('../views/UserView.vue'),
      //ネストされたルート
      children: [
        {
          path: 'profile',
          name: 'user-profile',
          //ネストされた名前付きビュー
          components: {
            default:   () => import('../views/FooView.vue'),
            content: () => import('../views/UserProfile.vue'),
          }
        },
        {
          path: 'posts',
          name: 'user-posts',
          //ネストされた名前付きビュー
          components: {
            default:   () => import('../views/BarView.vue'),
            content: () => import('../views/UserPosts.vue'),
          }
        },
      ],
    },
  ],
})
export default router

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" />
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/user/001">User 001</RouterLink>
        <RouterLink to="/user/009">User 009</RouterLink>
      </nav>
    </div>
  </header>
  <RouterView /><!-- トップレベルの RouterView -->
</template>

<template>
  <div class="user">
    <h1>User : {{ $route.params.uid}}</h1>
    <RouterLink :to="`/user/${$route.params.uid}/profile`">Profile</RouterLink> |
    <RouterLink :to="`/user/${$route.params.uid}/posts`">Posts</RouterLink>
    <!-- ネストされた名前付きビュー -->
    <RouterView /><!-- default -->
    <RouterView name="content" />
  </div>
</template>

<RouterLink :to="{ name: 'user-profile', params: { uid: $route.params.uid }}">
  Profile
</RouterLink> |
<RouterLink :to="{ name: 'user-posts', params: { uid: $route.params.uid }}">
  Posts
</RouterLink>

<template>
  <div class="user-profile">
    <h2>User Profile</h2>
  </div>
</template>

<template>
  <div class="user-posts">
    <h2>User Posts</h2>
  </div>
</template>

<template>
    <div class="foo">
      <h2>This is Foo section. </h2>
    </div>
  </template>;

<template>
  <div class="bar">
    <h2>This is Bar section. </h2>
  </div>
  </template>
  

// Global Before Guards（グローバルガード）の例
router.beforeEach((to, from) => {
  console.log('to:', to);
  console.log('from:', from);
});

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
  ・・・中略・・・
  ],
});

//全てのナビゲーションをキャンセル（グローバルガード）
router.beforeEach((to, from) => {
  return false;
});

export default router

// Global Before Guards（グローバルガード）の例
router.beforeEach((to, from) => {
  // 無限リダイレクトのエラーになる
  return { name: 'home' };
});

router.beforeEach((to, from) => {
  //移動先の名前（name プロパティ）が home でない場合にのみ
  if (to.name !== 'home') {
    // home にリダイレクト
    return { name: 'home' };
    //または return { path: '/' }; や return '/'; でも同じ
  }
});

router.beforeEach((to, from) => {
  //移動先のパスが '/' でない場合にのみ
  if (to.path !== '/') {
    return { name: 'home' };
  }
});

router.beforeEach((to) => {
  //クエリ文字が付いていれば
  if (Object.keys(to.query).length){
    //クエリを削除したパスを返す
    return { path: to.path, query: {}, hash: to.hash }
  }
});

router.beforeEach((to) => {
  //ハッシュ文字列があれば削除
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
});

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    ・・・中略・・・
    {
      path: '/user/:uid',
      name: 'user',
      component: () => import('../views/UserView.vue'),
      //ルート単位で設定
      beforeEnter: (to, from) => {
        if (to.hash) return { path: to.path, query: to.query, hash: '' }
      },
    },
  ],
});
export default router

{
  path: '/user/:uid',
  name: 'user',
  component: () => import('../views/UserView.vue'),
  beforeEnter: (to, from) => {
    // params の値をコンソールに出力
    console.log(to.params.uid)
  },
},

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

//クエリ文字列を削除して返す関数
const removeQueryParams = (to) => {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}
//ハッシュを削除して返す関数
const removeHash = (to) => {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    ・・・中略・・・
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
      //定義した関数を指定
      beforeEnter: [removeQueryParams],
      //この場合は beforeEnter: removeQueryParams, でも同じ
    },
    {
      path: '/user/:uid',
      name: 'user',
      component: () => import('../views/UserView.vue'),
      //定義した２つの関数を指定
      beforeEnter: [removeQueryParams, removeHash],
    },
  ],
});
export default router

<script setup>
// onBeforeRouteUpdate
import { onBeforeRouteUpdate } from 'vue-router';

onBeforeRouteUpdate((to) => {
  //クエリ文字が付いていれば
  if (Object.keys(to.query).length){
    //クエリを削除したパスを返す
    return { path: to.path, query: {}, hash: to.hash }
  }
});
</script>

<template>
  <div class="about">
    <h1>This is an about page </h1>
  </div>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    ・・・中略・・・
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
      //ルート単位で設定
      beforeEnter: (to) => {
        //クエリ文字が付いていれば
        if (Object.keys(to.query).length){
          //クエリを削除したパスを返す
          return { path: to.path, query: {}, hash: to.hash }
        }
      },
    },
    ・・・中略・・・
  ],
});
export default router

<script setup>
// onBeforeRouteLeave をインポート
import { onBeforeRouteLeave } from 'vue-router';

onBeforeRouteLeave((to, from) => {
  const answer = window.confirm('このページから移動しても良いですか？ 保存されていない変更があります。');
  //「キャンセル」がクリックされたら、false を返してナビゲーションをキャンセル
  if (!answer) return false;
});
</script>

<template>
  <div class="about">
    <h1>This is an about page </h1>
  </div>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      // meta プロパティにアニメーションの種類を表す文字列を設定
      meta: { animation: 'slide-in' },
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // meta プロパティ
      meta: { animation: 'fade-in' },
      component: () => import('../views/AboutView.vue'),
    },
    {
      path: '/user/:uid',
      name: 'user',
      // meta プロパティ
      meta: { animation: 'rotate' },
      component: () => import('../views/UserView.vue'),
    },
  ],
});
export default router

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
  ・・・中略・・・
  </header>

  <RouterView v-slot="{ Component, route }">
    <transition mode="out-in" v-bind:name="route.meta.animation || 'fade-in'">
      <component :is="Component" :key="route.path"/>
    </transition>
  </RouterView>

</template>

<style scoped>
/* fade-in */
.fade-in-enter-active,
.fade-in-leave-active {
  transition: opacity 0.5s ease;
}
.fade-in-enter-from,
.fade-in-leave-to {
  opacity: 0.1;
}
/* rotate */
@keyframes rotate {
  0% {
    transform: rotate(360deg);
  }
  10% {
    transform: rotate(160deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.rotate-enter-active {
  animation : rotate 0.5s;
}
/* slide-in */
@keyframes slide-in {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(30%);
  }
  100% {
    transform: translateX(0);
  }
}
.slide-in-enter-active {
  animation : slide-in 0.5s;
}
.slide-in-leave-active {
  animation : slide-in 0.2s reverse;
}
・・・中略・・・
</style>