مبحث Redirect و اضافه‌کردن انیمیشن

Redirect and Adding Animation

تا این قسمت از کار به خوبی پیش آمده ایم اما هنوز مباحث مهمی از مانند Redirect کردن کاربران باقی مانده است. اگر در حال حاضر به آدرس زیر بروید چه اتفاقی می افتد؟

http://localhost:8080/something

با رفتن به این آدرس به یک صفحه خالی برمی خورید چرا که کامپوننتی برای نمایش وجود ندارد. من می خواهم کاری کنم که اگر کاربر به صفحات تعریف نشده مراجعه کند، به صفحه دیگری مثل صفحه Home منتقل شود (redirect شود). من ابتدا با عملیات ساده تری شروع می کنم. مثلا می خواهیم اگر به فلان آدرس خاص رفتیم، redirect شویم. برای این کار به فایل routes.js رفته و می گوییم:

export const routes = [
    {
        path: '', name: 'Home', components: {
            default: Home,
            'header-top': Header
        }
    },
    {
        path: '/user', components: {
            default: User,
            'header-bottom': Header
        }, children: [
            { path: '', component: UserStart },
            { path: ':id', component: UserDetail },
            { path: ':id/edit', component: UserEdit, name: 'userEdit' }
        ]
    },
    { path: '/redirect-me', redirect: '/user' }
];

همانطور که می بینید برای این مسئله یک path جدید دریافت کرده ام و گفته ام اگر به آدرس redirect-me رفته ایم، ما را به user/ منتقل کن. در اینجا حتما باید از خصوصیت redirect استفاده کنید تا کاربر redirect شود. حالا برای تست کردن کد ها به آدرس زیر می رویم:

http://localhost:8080/redirect-me

با انجام این کار به صفحه user منتقل خواهید شد بنابراین همه چیز به درستی کار می کند. البته می توانید به خصوصیت redirect یک شیء نیز پاس بدهید. مثلا:

    { path: '/redirect-me', redirect: {name: 'Home'} }

یعنی به Home برگردانده شویم. این کد خوب است اما فقط برای آدرس خاصی کار می کند (redirect-me/). چطور باید کاری کنیم که با مراجعه کاربر به صفحات ناموجود، او را از همه آن ها redirect نماییم؟

export const routes = [
    {
        path: '', name: 'Home', components: {
            default: Home,
            'header-top': Header
        }
    },
    {
        path: '/user', components: {
            default: User,
            'header-bottom': Header
        }, children: [
            { path: '', component: UserStart },
            { path: ':id', component: UserDetail },
            { path: ':id/edit', component: UserEdit, name: 'userEdit' }
        ]
    },
    { path: '/redirect-me', redirect: { name: 'Home' } },
    { path: '*', redirect: '/' }
];

همانطور که می بینید یک route جدید تعریف کرده ام و path آن را برابر علامت ستاره قرار داده ام که یک wildcard است. با این کار vue-router تمام path های قبل از ستاره را چک می کند و اگر هیچ کدام برابر با URL مرورگر کاربر نبود به سراغ ستاره می رود. حالا اگر مرورگر را باز کنید و هر آدرسی را در آن تایپ کنید که در این فایل تعریف نشده باشد، به صفحه اصلی برنامه (آدرس /) منتقل خواهید شد.

دانلود سورس کد این فصل تا این قسمت

اضافه کردن انیمیشن به route ها

حالا که با مباحث پایه ای routing در Vue آشنا شدیم این وقت آن رسیده است که به مباحث پیشرفته تر هم نگاهی داشته باشیم. اولین مبحث ما اضافه کردن انیمیشن به route های مختلف است. برای این کار به فایل App.vue می رویم و route-view میانی را بین تگ های transition قرار می دهیم:

<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
  <h1>Routing</h1>
  <hr />
  <router-view name="header-top"></router-view>
  <transition name="slide" mode="out-in">
    <router-view></router-view>
  </transition>
  <router-view name="header-bottom"></router-view>
</div>

چرا از transition-group استفاده نکرده ایم؟ به دلیل اینکه این کامپوننت باید با کامپوننت دیگری جایگزین شود نه اینکه هر دو با هم نمایش داده شوند. زمانی که فقط می خواهیم یک کامپوننت را نمایش بدهیم حتما باید از transition خالی استفاده کنیم. همانطور که می بینید از انیمیشنی به نام slide استفاده کرده ام و برای حل مشکل جهش، مثل همیشه با mode برابر با out-in کار می کنیم. از آنجایی که این انیمیشن را در فصل انیمیشن ها نوشته بودیم و کاملا بررسی کردیم، من کد ها را از همان فصل کپی کرده و در انتهای فایل App.vue قرار می دهم:

<style>
.slide-leave-active {
  transition: opacity 1s ease;
  opacity: 0;
  animation: slide-out 1s ease-out forwards;
}

.slide-leave {
  opacity: 1;
  transform: translateX(0);
}

.slide-enter-active {
  animation: slide-in 1s ease-out forwards;
}

@keyframes slide-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}

@keyframes slide-in {
  0% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

اگر الان به مرورگر بروید، در هنگام انتقال بین کامپوننت ها، باید افکت انیمیشنی را مشاهده کنید و گرنه یکی از قسمت ها را اشتباه انجام داده اید.

حرکت به قسمت خاصی از صفحه با id

برخی اوقات قسمت خاصی از صفحه شما دارای id خاصی است و شما می خواهید با علامت # به آن id بروید. برای انجام چنین کاری چطور عمل کنیم؟ من فایل userEdit.vue را بدین شکل ویرایش می کنم:

<template>
  <div>
    <h3>Edit the User</h3>
    <p>Locale: {{ $route.query.locale }}</p>
    <p>Analytics: {{ $route.query.q }}</p>
    <div style="height: 700px"></div>
    <p id="data">Some extra Data</p>
  </div>
</template>

یعنی یک div را با طول 700 پیکسل اضافه می کنم تا صفحه حتما اسکرول دار شود. سپس یک تگ p ساده را می گذارم که مقدار id را دارد. حالا به آدرس زیر می رویم تا ببینیم این پاراگراف ایجاد شده است یا خیر:

http://localhost:8080/user/1/edit?locale=en&q=100

اگر همه چیز را درست انجام داده باشید، پس از اسکرول کردن باید تگ p را ببینید. حتما می دانید که رفتار پیش فرض مرورگر ها این است که با اضافه کردن هشتگ می توانیم به قسمت خاصی از صفحه منتقل شویم. مثلا:

http://localhost:8080/user/1/edit?locale=en&q=100#data

اضافه کردن data# یعنی به قسمتی برو که عنصری با آیدی data دارد. با وارد شدن به آدرس بالا خودتان متوجه می شوید که دیگر صفحه در بالا نیست و به صورت خودکار به p رفته اید. این رفتار عمومی مرورگر ها است و هیچ ربطی به Vue.js ندارد اما در قسمت بعد این کار را با Vue انجام خواهیم داد تا کنترل بیشتری روی کار داشته باشیم.