ساخت URLهای پویاتر با Named Routes

Building More Dynamic URLs with Named Routes

در قسمت قبل URL ها را طوری طراحی کردیم چند کاربر داشته باشیم و هر کاربر صفحه ای برای جزئیات و صفحه ای برای ویرایش داشته باشد. مشکل اینجاست که این URL ها به صورت دستی وارد می شوند ولی ما می خواهیم به صورت لینک و قابل کلیک باشند. برای انجام این کار ابتدا به فایل UserStart.vue می رویم و li ها را با router-link عوض می کنیم:

<template>
  <div>
    <p>Please select a User</p>
    <hr />
    <ul class="list-group">
      <router-link tag="li" to="/user/1" class="list-group-item" style="cursor: pointer">User 1</router-link>
      <router-link tag="li" to="/user/2" class="list-group-item" style="cursor: pointer">User 2</router-link>
      <router-link tag="li" to="/user/3" class="list-group-item" style="cursor: pointer">User 3</router-link>
    </ul>
  </div>
</template>

من هنوز هم می خواهم از li استفاده کنم بنابراین tag را روی li گذاشته ام تا عنصر نهایی که جایگزینِ router-link می شود یک <li> باشد. همچنین برای To ها به ترتیب کاربران 1 و 2 و 3 را تعریف کرده ام البته شما می توانید این مقادیر را به صورت پویا پاس بدهید. حالا با کلیک روی لیست موجود در آدرس http://localhost:8080/user می توانیم به صفحه UserDetail مربوط به هر کاربر برویم.

در مرحله بعد باید به UserDetail.vue برویم تا id کاربر را از URL گرفته و نمایش دهیم:

<template>
  <div>
    <h3>Some User Details</h3>
    <p>User loaded has ID: {{ $route.params.id }}</p>
  </div>
</template>

ما می توانستیم مانند جلسات قبل مقدار این id را گرفته و در یک خصوصیت ذخیره کنیم اما URL در این کامپوننت بدون اینکه به کامپوننت UserStart برگردیم، تغییر نخواهد کرد. به عبارت دیگر اگر در UserDetail باشم، هیچ لینک دیگری وجود ندارد که روی آن کلیک کنیم و پارامترهای URL را تغییر بدهد، بنابراین نیازی به watch کردن URL و امثال آن نداریم. حتی اگر سعی کنید آن را به صورت دستی ویرایش کنید، کل صفحه refresh می شود بنابراین همه چیز دوباره ساخته خواهد شد. در مرحله بعد باید برای هر کاربر یک دکمه ویرایش داشته باشیم بنابراین می گویم:

<template>
  <div>
    <h3>Some User Details</h3>
    <p>User loaded has ID: {{ $route.params.id }}</p>
    <router-link
      tag="button"
      :to="'/user/' + $route.params.id + '/edit'"
      class="btn btn-primary"
    >Edit User</router-link>
  </div>
</template>

همانطور که می بینید من می خواهم router-link به یک دکمه (button) تبدیل شود بنابراین tag را به صورت بالا مشخص کرده ام. همچنین to را به v-bind (علامت دو نقطه) متصل کرده ام تا یک مقدار پویا را به قبول کند. بر اساس مسیری که در routes.js داشتیم، می دانیم که مسیر ویرایش کاربر شبیه به user/id/edit است بنابراین قسمت اول (user/) را به صورت یک رشته پاس داده ایم (به single quotation ها دقت کنید) سپس id را از همان صفحه دریافت کرده ایم. در نهایت مقدار edit را نیز اضافه کرده ایم. از این به بعد می توانید به کامپوننت userEdit نیز بروید.

احتمالا شما هم متوجه شده اید که این روش نوشتن کد (با اینکه کار می کند) خیلی جالب نیست. به طور مثال اگر آدرس ما طولانی شود و چندین پارامتر داشته باشد، باید کدهای زیادی را به صورت درهم و شلخته بنویسیم تا یک لینک ساده راه بیفتد. خوشبختانه پکیج vue-router به ما اجازه می دهد که برای route های خودمان نامی را انتخاب کنیم. برای انجام این کار به routes.js رفته و می گوییم:

 export const routes = [
    { path: '', component: Home },
    {
        path: '/user', component: User, children: [
            { path: '', component: UserStart },
            { path: ':id', component: UserDetail },
            { path: ':id/edit', component: UserEdit, name: 'userEdit' }
        ]
    }
];

همانطور که می بینید من برای path سوم (مسیر id/edit) خصوصیت name را تعریف کرده ام و مقدارش را به سلیقه خودم userEdit گذاشته ام. شما می توانید هر نام دیگری را برایش انتخاب کنید. حالا به UserDetail.vue برمی گردیم و مقدار to را به شکل زیر تغییر می دهیم:

<template>
  <div>
    <h3>Some User Details</h3>
    <p>User loaded has ID: {{ $route.params.id }}</p>
    <router-link
      tag="button"
      :to="{ name: 'userEdit', params: { id: $route.params.id } }"
      class="btn btn-primary"
    >Edit User</router-link>
  </div>
</template>

من شیء ای را به to پاس داده ام (یادتان نرود که to به v-bind متصل باشد، یعنی علامت های دو نقطه را داشته باشد تا مقدار پویا قبول کند) که دو خصوصیت دارد:

name همان نامی است که برای مسیر مورد نظرمان تعیین کرده بودیم (userEdit به صورت رشته باشد). Vue به صورت خودکار این مسیر را در این قسمت قرار می دهد اما id چطور؟
params پارامترهایی است که مسیر مورد نظر باید دریافت کند. اگر یادتان باشد در js مسیر را طوری تعریف کرده بودیم که id را به صورت پویا بگیرد بنابراین پارامتری که باید برایش تعریف کنیم id است و مقدار آن را نیز از همین صفحه استخراج می کنیم.

ما می توانیم همین کار را در User.vue نیز انجام بدهیم. اگر یادتان باشد در این فایل متدی به نام navigateToHome داشتیم که از متد push استفاده می کرد. من در همان جلسه به شما گفتم که می توانیم آن را به یکی از دو شکل زیر بنویسیم:

  methods: {
    navigateToHome() {
      this.$router.push({ path: "/" });
    }
  }

  methods: {
    navigateToHome() {
      this.$router.push("/");
    }
  }

اما روش دیگری نیز وجود دارد. یعنی از همان روش name یا نام دهی به مسیر اصلی انتخاب کنیم. ما می توانیم ابتدا به فایل routes.js برویم و یک نام به مسیر اصلی (root url) سایت بدهیم:

export const routes = [
    { path: '', component: Home, name: 'Home' },
    {
        path: '/user', component: User, children: [
            { path: '', component: UserStart },
            { path: ':id', component: UserDetail },
            { path: ':id/edit', component: UserEdit, name: 'userEdit' }
        ]
    }
];

من نام Home را انتخاب کرده ام. سپس به فایل User.vue می رویم و می گوییم:

  methods: {
    navigateToHome() {
      this.$router.push({ name: "Home" });
    }
  }

حالا اگر به مرورگر رفته و کدها را تست کنیم، دکمه Go to Home به درستی کار می کند.