
تا این قسمت از کار به خوبی پیش آمده ایم اما هنوز مباحث مهمی از مانند 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 انجام خواهیم داد تا کنترل بیشتری روی کار داشته باشیم.
- نصب و راهاندازی فریمورک VueJS
- مثالی قویتر و نصب محلی Vue
- درکی ساده از Tamplateها در Vue
- درک بهتر Directiveها + برخی از Directiveهای مشهور
- تعامل با Event Listenerها
- قدرت Vue با انواع Modifierها
- مبحث two-way-binding و پاسخ به تغییرات
- خصوصیات محاسبهشده (Computed Properties)
- روش جایگزین خصوصیات Computed
- استایلدهی پویا با اشیاء
- استایلدهی پویا اسمی بدون استفاده از کلاسها
- ایجاد شرط با v-if
- نمایش لیستها با v-for
- گردش درون اشیاء
- رهگیری عناصر در v-for
- اولین پروژه تمرینی – آمادهسازی اولیه
- پیادهسازی منطق شروع بازی
- تکمیل دکمه Attack
- کدنویسی متدهای باقیمانده در بازی
- نمایش log و اتمام پروژه
- آشنایی و تعامل بیشتر با شیء Vue
- نحوه مدیریت دادهها در شیء Vue
- استفاده از ref$ در قالبهای HTML
- آشنایی با Mount کردن Templateها
- نحوه بهروزرسانی DOM و چرخه زندگی شیء Vue
- استفاده از Lifecycleها در عمل
- راهاندازی سرور محلی Vue
- آشنایی با Vue CLI
- درک بهتر فایلهای Vue
- آشنایی با کامپوننتها
- ساخت کامپوننتها
- استفاده از کامپوننتها و قوانین آن
- ارتباط بین کامپوننتها با Props
- اعتبارسنجی Props
- رویدادهای شخصیسازیشده
- ارتباط بین کامپوننتهای خواهر و برادر
- استفاده از یک شیء سراسری Vue
- آشنایی با Slotها
- بررسی جزئیات بیشتری از Slotها
- قابلیتی جدید به نام Dynamic Components
- مرگ کامپوننتهای پویا
- فصل جدید و پروژه جدید
- پروژه Quote – پاسدادن دادهها با Prop
- پروژه Quote – تکمیل ثبت Quote
- تکمیل پروژه Quoteها
- فصل جدید، کار با فرمها
- کار با عناصر Textarea
- عناصر Checkbox و Radiobutton
- کار با منوهای آبشاری و جزئیات v-model
- تعریف عناصر شخصیسازیشده
- نگاهی عمیقتر به Directiveها
- ساخت یک Directive شخصی
- ثبت محلی Directiveها + قدمی پیشرفتهتر
- آشنایی با Filterها
- جایگزینی برای Filterها
- آشنایی با Mixinها
- جزئیات تکمیلی در مورد Mixinها
- آشنایی با انیمیشنها در Vue
- استفاده عملی از Transition و Animation
- ترکیب Transition و Animation
- استفاده از کلاسهای CSS مختلف
- تبدیل عناصر مختلف به یکدیگر با انیمیشن
- اعمال انیمیشن با جاوا اسکریپت
- کدنویسی متدهای مربوط به hookهای جاوا اسکریپتی
- تکمیل انیمیشن جاوا اسکریپتی + کامپوننتهای پویا
- ساخت یک لیست برای انیمیشنهای گروهی
- اضافهکردن انیمیشن به لیست ساختهشده
- مینی پروژه فصل – سوالات ریاضی
- تکمیل پروژه و اضافهکردن انیمیشن
- فصل جدید، درخواستهای HTTP
- ارسال اطلاعات به Firebase
- دریافت دادهها از Firebase
- آشنایی با Interceptorها در Vue-Resource
- آشنایی با مفهوم Resource در Vue-Resource
- جزئیات تکمیلی Resourceها
- فصل جدید، آشنایی با Routing
- آشنایی با Routing Modes و اضافهکردن لینکها
- استایلدهی لینک فعال
- ایجاد Navigation با کد و پارامترهای URL
- واکنش به تغییرات URL و پارامترهای آن
- ساخت URLهای پویاتر با Named Routes
- مباحث Query Parameter و Redirection
- مبحث Redirect و اضافهکردن انیمیشن
- پاسدادن # و کنترل عملیات اسکرول
- محافظت از Routeها با استفاده از Gaurdها (قسمت اول)
- محافظت از Routeها با استفاده از Gaurdها (قسمت دوم)
- بارگذاری Routeها به صورت lazy
- فصل جدید، آشنایی با VueX
- نحوهی پیادهسازی اولیهی پکیج VueX
- آشنایی با Getterها در VueX
- اتصال خودکار Getterها به خصوصیات
- حل مشکل ترکیب Getterها و Computed Props
- آشنایی با مبحث Mutation در VueX
- آشنایی با Actionها در Mutations
- درک عملیاتهای پشت صحنه در mapActions
- خلاصهی جلسات قبل + معرفی مشکلی جدید
- اعمال two-way-binding در VueX
- ماژولار کردن مدیریت State در VueX
- استفاده از Namespaceها در VueX
- فصل جدید، پروژهی نهایی دوره
- پیادهسازی Header یا Navigation سایت
- ایجاد ساختار برای قسمت سهام (stocks)
- اضافهکردن منطق دکمهی Buy
- پیادهسازی VueX روی پروژه
- تعریف Mutationهای ماژول Portfolio در VueX
- پیادهسازی Getters برای ماژول Portfolio در VueX
- تکمیل کامپوننت Portfolio و نمایش سهام
- اعتبارسنجی برای فروش سهام و استفاده از فیلترها
- نمایش Funds و اعتبارسنجی برای خرید سهام
- پایان دادن به روز + اضافه کردن انیمیشن به صفحات
- پیادهسازی drop-down و راهاندازی Firebase
- ذخیره و دریافت قیمتها با درخواستهای PUT و GET
- تکمیل دکمهی Load Data و کار با Vue dev Tools
- خروجیگرفتن نهایی از برنامه برای قرارگیری روی سرور
- فصل پیوست ۱: استفاده از axios به جای vue-resource
- فصل پیوست ۱: درخواست GET در axios
- فصل پیوست ۱: استفاده از Interceptorها در Axios
- فصل پیوست ۲: احراز هویت در برنامههای SPA
- فصل پیوست ۲: ساخت کاربر جدید با ایمیل و رمز عبور
- فصل پیوست ۲: دریافت توکن احراز هویت در مرورگر
- فصل پیوست ۲: تکمیل منطق برنامه و کدهای باقیمانده
- فصل پیوست ۲: پیوست توکن به درخواستهای خروجی
- فصل پیوست ۲: بهینهسازی برنامه و Path Guard
- فصل پیوست ۲: اضافهکردن مکانیسم logout از حساب
- فصل پیوست ۲: پیادهسازی logout خودکار از حساب
- فصل پیوست ۲: ذخیرهی دادهها در localStorage
- فصل پیوست ۲: پیادهسازی فرآیند login خودکار
- فصل پیوست ۳: فصل جدید، اعتبارسنجی دادههای کاربر
- فصل پیوست ۳: ارائهی فیدبک اعتبارسنجی در UI
- فصل پیوست ۳: آشنایی با Validatorهای عددی
- فصل پیوست ۳: آشنایی با Validatorهای رمز عبور
- فصل پیوست ۳: آشنایی با requiredUnless
- فصل پیوست ۳: اعتبارسنجی آرایههای پویا
- فصل پیوست ۳: ثبت فرم و اعتبارسنجیهای ناهمگام
- فصل پیوست ۴: نسخهی 3 از Vue CLI
- فصل پیوست ۴: آشنایی با پروژه در CLI جدید
- فصل پیوست ۴: استفاده و کار با پلاگینها در CLI جدید
- فصل پیوست ۴: آشنایی با Environment Variables
- فصل پیوست ۴: خروجی گرفتن از برنامه نهایی
- فصل پیوست ۴: شخصیسازی بیشتر Build
- فصل پیوست ۴: استفاده از GUI