ایجاد Navigation با کد و پارامترهای URL

?How To Create Navigation with Code and URL Parameters

navigation با کدهای جاوا اسکریپت

در قسمت قبل موفق شدیم که لینک های خود را بر اساس URL صفحه استایل دهی کنیم تا لینک فعال مشخص شود. در این قسمت می خواهیم در مورد navigation با کدهای جاوا اسکریپت صحبت کنیم. navigate کردن (جا به جا شدن بین صفحات) با لینک های Home و User بسیار کاربردی است اما در برنامه های واقعی برخی اوقات لازم است که جا به جا شدن کاربر با استفاده از کد صورت بگیرد. مثلا عملیاتی در صفحه ای تمام شده است و حالا باید کاربر را به صفحه دیگری منتقل کنیم، یا کاربر به صفحه ای که وجود ندارد رفته است بنابراین می خواهیم او را به صفحه اصلی منتقل کنیم.

برای انجام این کار به فایل User.vue بروید. ما می خواهیم در این فایل، دکمه ای را تعریف کنیم که با کلیک روی آن به صفحه اصلی منتقل شویم. توجه کنید که از لینک ها استفاده نمی کنیم، بلکه از یک دکمه (button) استفاده می کنیم بنابراین جا به جایی حتما باید با کد صورت بگیرد. من می گویم:

<template>
  <div>
    <h1>The User Page</h1>
    <hr />
    <button @click="navigateToHome" class="btn btn-primary">Go to Home</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToHome() {
      
    }
  }
};
</script>

یعنی یک دکمه به نام Go to Home تعریف کرده ام که به متد navigateToHome متصل شده است. سوال اینجاست که چطور کدی را درون navigateToHome بنویسم که با اجرا شدن، کاربر را به صفحه دیگری ببرد (redirect کند)؟ ما می توانیم به شکل زیر عمل کنیم:

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

ما می توانیم به router$ دسترسی داشته باشیم و سپس متد push را روی آن صدا بزنیم. push معانی مختلفی در انگلیسی دارد (مانند «هل دادن») اما در اینجا به معنی اضافه کردن آدرس جدید به آدرس های قبلی در حافظه مرورگر است. زمانی که مرورگر خود را باز می کنید و به صفحات مختلف می روید، مرورگر آدرس این صفحات را در حافظه نگه می دارد. به همین دلیل است که دکمه های back و Forward (صفحه بعدی و قبلی) در مرورگر کار می کنند. بنابراین push کاربر را به آدرسی جدید می برد اما به شکلی که دکمه های back و forward به خوبی کار کنند. این متد در ساده ترین حالت خود یک آدرس را می گیرد که در کد بالا / را به آن پاس داده ام اما می توانیم به صورت پیشرفته تری از آن استفاده کرده و بگوییم:

<script>
export default {
  methods: {
    navigateToHome() {
      this.$router.push({ path: "/" });
    }
  }
};
</script>

این کد با کد بالا هیچ فرقی ندارد اما اگر بدین شکل عمل کنیم (یک شیء را به push بدهیم) می توانیم از گزینه های دیگری نیز استفاده کنیم که در ادامه بعد در موردشان صحبت خواهیم کرد. من فعلا از حالت ساده استفاده می کنم و شیء ای را پاس نمی دهم. حالا اگر به مرورگر برویم همه چیز بدون مشکل کار خواهد کرد. می توانیم به user رفته و روی دکمه Go to Home کلیک کنیم تا به صفحه اصلی منتقل شویم.

اضافه کردن پارامتر به مسیر URL

حالا که می توانیم با استفاده از جاوا اسکریپت کاربر را جا به جا کنیم نوبت به بررسی بحث دیگری است. گزینه هایی که می توانیم به شیء push پاس بدهیم. در حال حاضر تمام URL های ما استاتیک یا ایستا هستند (فایل routes.js):

export const routes = [
    { path: '', component: Home },
    { path: '/user', component: User }
];

مثلا فرض کنید بخواهیم برای user، آیدی کاربر را به URL اضافه کنیم و سپس زمانی که کامپوننت User.vue بارگذاری شد از این آیدی در آن استفاده کنیم (چیزی شبیه به user/10/). برای اضافه کردن هر پارامتری به صورت پویا باید آن را با علامت دو نقطه (شبیه v-bind) پاس بدهید. من این کار را برای user انجام می دهم (فایل routes.js):

export const routes = [
    { path: '', component: Home },
    { path: '/user/:id', component: User }
];

اینجا می توانید هر نامی به جای id انتخاب کنید (بستگی به سلیقه خودتان دارد). این کد به Vue می گوید کامپوننت user باید زمانی بارگذاری شود که به آدرسی مطابق ساختار بالا برویم (user/id) به صورتی که id هر مقداری می تواند باشد.

حالا برای اینکه از این قابلیت استفاده کنیم به header.vue برگشته و مقداری را برای user قرار می دهم:

<router-link to="/user/10" tag="li" active-class="active">
  <a>User</a>
</router-link>

حالا اگر به مرورگر بروید و روی دکمه User کلیک کنید آدرس زیر را در مرورگر می بینید:

http://localhost:8080/user/10

اگر این آدرس را به صورت دستی تغییر داده و به آدرس زیر بروید چطور؟

http://localhost:8080/user

با انجام این کار هیچ کامپوننتی باز نشده بنابراین کد ما دیگر کار نمی کند. چرا؟ به دلیل اینکه اعلام کرده بودیم از این به بعد آدرس user/X/ وجود خواهد داشت (به طوری که X هر چیزی باشد) اما دیگر user/ را تعریف نکرده ایم بنابراین user خالی اصلا وجود ندارد. حالا می توانیم این id را به صورت پویا دریافت کرده و هر کاری را با آن انجام بدهیم. من فعلا می خواهم آن را نمایش بدهیم بنابراین به فایل User.vue می روم و می گویم:

<script>
export default {
  data () {
    return {
      id: this.$route.params.id
    }
  },
  methods: {
    navigateToHome() {
      this.$router.push('/');
    }
  }
};
</script>

یعنی خصوصیت id در این صفحه برابر با پارامتر id است. توجه کنید که شیء route$ یکی از اشیاء خود Vue است و ربطی به پکیج vue-resource ندارد بنابراین نباید آن را با router$ در کد بالا اشتباه بگیرید. router$ از فایل main.js می آید که در آنجا از new VueRouter استفاده کرده بودیم اما route$ به صورت پیش فرض در Vue وجود دارد و به شما اجازه دسترسی به URL صفحه را می دهد (URL ای که در آن لحظه در مرورگر باز است). سپس با دسترسی به params روی این شیء می توانید به پارامتر های مختلف آن دسترسی داشته باشید که ما اینجا به دنبال id هستیم. این id همان نامی است که در فایل routes.js انتخاب کردیم. حالا می توانیم در همین فایل (User.vue) بگوییم:

<template>
  <div>
    <h1>The User Page</h1>
    <hr />
    <p>User ID: {{ id }}</p>
    <button @click="navigateToHome" class="btn btn-primary">Go to Home</button>
  </div>
</template>

همانطور که می بینید من از {{}} استفاده کرده ام و آن را در مرورگر نمایش داده ام. در حال حاضر اگر به مرورگر رفته و روی لینک User کلیک کنید، این مقدار را خواهید دید. حالا اگر به صورت دستی آدرس URL را به شکل زیر تغییر دهیم چه می شود؟

http://localhost:8080/user/5

با انجام این کار مقدار نمایش داده شده در مرورگر به شکل زیر در می آید:

User ID: 5

بنابراین مقدار id به صورت پویا دریافت می شود و همانطور که گفتم مهم نیست چه مقداری باشد. حتی اگر آن را به صورت رشته بنویسید (مثلا user/Roxo) باز هم کار می کند چرا که اصلا تعیین نکرده ایم چه مقادیری را قبول می کنیم:

User ID: Roxo