مباحث Query Parameter و Redirection

Query Parameter + Redirection

در قسمت قبل موفق شدیم که route های خود را نام گذاری کنیم و متوجه قدرت آن ها شدیم. در این جلسه قرار است در مورد چند مبحث خلاصه صحبت کنیم که اولین آن ها query parameter ها هستند. مبحث query parameter ها به Vue اختصاصی ندارند و یک مفهوم عمومی در فضای وب هستند. URL زیر را در نظر بگیرید:

www.example.com

query parameter ها مقداری هستند که پس از علامت سوال می آیند و مقدار آن ها قابل استخراج است. query string ها معمولا ساختار زیر را دارند:

www.example.com?key=value&key=value

یعنی به صورت جفت های key و value هستند. علامت & نیز یک query parameter را از query parameter بعدی جدا می کند. به طور مثال:

www.example.com?a=100&b=hello

از قسمت ؟ به بعد، مقادیر a و b را داریم که به هر کدام از آن ها query parameter می گویند. کل مقدار موجود پس از ? نیز query string نام دارد. یعنی این قسمت:

?a=100&b=hello

شما می توانید هر داده ای را در این قسمت ارسال کنید. وب سایت ها از این قابلیت برای مقاصد مختلفی استفاده می کنند. مثلا یکی از مثال های رایج بدین شکل است که با قرار دادن مقادیر خاص در query string می توانیم مشخص کنیم کاربر از کجا آمده است. مثلا به وب سایتی سفارش تبلیغ سایت خود را می دهیم و برای اینکه بفهمیم چند نفر از آن سایت به سایت ما آمده اند، به مدیر آن سایت می گوییم URL ما را به صورت example.com قرار ندهد بلکه به صورت example.com?source=anothersite. بدین صورت کسی که روی لینک کلیک می کند با این URL به سایت ما می آید و می فهمیم که از anothersite به سمت سایت ما هدایت شده است نه گوگل یا منابع دیگر.

برای اینکه بتوانید از query parameter ها درون vue استفاده کنید راه های مختلفی دارید. مثلا می توانید آن را به to بدهید:

    <router-link to="/?a=100" tag="li" active-class="active" exact>

همچنین می توانید از طریق شیء آن را پاس بدهید. مثلا در UserDetail.vue که کد زیر را داریم:

<router-link
  tag="button"
  :to="{ name: 'userEdit', params: { id: $route.params.id } }"
  class="btn btn-primary"
>Edit User</router-link>

ما می توانیم خصوصیت جدیدی به نام query را به این شیء اضافه کنیم:

<router-link
  tag="button"
  :to="{ name: 'userEdit', params: { id: $route.params.id }, query: { locale: 'en', q: 100 } }"
  class="btn btn-primary"
>Edit User</router-link>

همانطور که می بینید query شیء ای را می گیرد که key و value های query string را درون خود دارد. حالا اگر به مرورگر بروید و روی دکمه Edit User کلیک کنید، وارد آدرس زیر می شویم:

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

بنابراین query parameter های ما به صورت صحیح و سالم در URL قرار گرفته اند. من می خواهم این اطلاعات را در UserEdit.vue دریافت کنم بنابراین به این فایل رفته و می گویم:

<template>
  <div>
    <h3>Edit the User</h3>
    <p>Locale: {{ $route.query.locale }}</p>
    <p>Analytics: {{ $route.query.q }}</p>
  </div>
</template>

همانطور که می بینید نحوه دسترسی به خصوصیات query string به جای اینکه به صورت route.params باشد به صورت route.query است که از طریق آن به locale و q دسترسی داریم. حالا اگر به مرورگر رفته و کدها را تست کنید، همه چیز به درستی اجرا خواهد شد و این مقادیر را مشاهده خواهید کرد. همچنین از آنجایی که دکمه ای نداریم که بدون refresh شدن صفحه URL را تغییر دهد، نیازی به ایجاد Watcher نداریم.

آشنایی با Named Router-View ها

ما می توانیم router view های خود را نام گذاری کنیم. منظور ما از router view همان کامپوننت <router-view> است. این تگ معمولا درون فایل Vue ای است که بقیه کامپوننت ها در آن render می شوند (نمایش داده می شوند). نام گذاری router-view ها در بسیاری از برنامه ها کارایی ندارد یا حداقل لازم نیست اما دوست دارم آن را به شما نشان بدهم تا اگر در برنامه های خاصی به آن نیاز داشتید، بتوانید از آن ها استفاده کنید.

فرض کنید بخواهیم header برنامه مان را در قسمت کاربران در قسمت پایین صفحه نمایش بدهیم. header ما همان قسمتی است که لینک های Home و User در آن قرار دارند. بر این اساس من به App.vue رفته و دیگر <app-header> را به شکل زیر نمی نویسیم:

<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
  <h1>Routing</h1>
  <hr />
  <app-header></app-header>
  <router-view></router-view>
</div>

بلکه به جای آن دو router-view دیگر می گذاریم که جایگاه app-header در آن ها بر اساس صفحه ای که در آن هستیم تغییر کند. در مرحله اول باید نامی را برایشان انتخاب کنیم:

<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>
  <router-view></router-view>
  <router-view name="header-bottom"></router-view>
</div>

من نام اولی را header-top و نام سومی را header-bottom گذاشته ام. router-view دومی نیز نامی ندارد بنابراین router-view پیش فرضی است که تمام عناصر دیگر در آن بارگذاری خواهند شد. در مرحله بعد به فایل routes.js می رویم و component را از path اصلی (root URL) حذف کرده و به جای آن خصوصیت components را برایش تعریف می کنیم که یک شیء را می گیرد:

import Header from './components/Header.vue';

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

همانطور که می بینید من در ابتدا Header را در این فایل import کرده ام. سپس به جای component، خصوصیت components را تعریف کرده ام که یک شیء با دو خصوصیت دیگر می گیرد:

default یعنی کامپوننت پیش فرض ما که همان Home است.
header-top همان router-view ما است که این نام را برایش انتخاب کرده بودیم.

اگر این کدها را ذخیره کرده و به مرورگر بروید، با مراجعه به آدرس localhost:8080 می توانیم header را ببینیم اما اگر به localhost:8080/user برویم دیگر header را نمی بینیم (لینک های Home و User ناپدید می شوند). چرا؟ به دلیل اینکه Header را در User بارگذاری نکرده ایم. اگر یادتان باشد گفتم که می خواهم با ورود به User، قسمت Header در پایین صفحه نمایش داده شود بنابراین:

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' }
        ]
    }
];

یعنی خصوصیت components را برای User نیز نوشته ایم (به جای component که قبلا وجود داشت). default یا کامپوننت پیش فرض User است اما این بار به جای header-top از header-bottom استفاده کرده ایم. یعنی محتوا در router-view ای با نام header-bottom بارگذاری شود که پایین تر از User بود. حالا می توانید کدها را تست کنید. با ورود به قسمت User، کامپوننت Header در قسمت پایین صفحه نمایش داده می شود.