فصل جدید، آشنایی با Routing

Introduction to Routing

به فصل جدید Routing خوش آمدید. تا اینجای کار همیشه با برنامه های عادی سر و کار داشته ایم و سراغ SPA (مخفف single page application) ها رفته ایم. دلیل آن عدم آشنایی با router بود اما در این فصل پس از آنکه با router آشنا شدیم می توانیم برنامه های SPA نیز بنویسیم. در ابتدا از پروژه خالی همیشگی خود شروع می کنم که در ابتدای هر فصل برای دانلود قرار می دهم. فایل App.vue مثل همیشه خالی است:

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1>Routing</h1>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
    }
</script>

<style>
</style>

همچنین مفهوم اصلی routing تغییر کامپوننت ها به صورت پویا است بنابراین باید چندین کامپوننت داشته باشیم تا کاربر را بین آن ها جا به جا کنیم. برای شروع در پوشه src یک پوشه جدید به نام components بسازید. این پوشه باید شامل دو عنصر باشد:

فایلی به نام vue
پوشه دیگری به نام user

فایل Home یک کامپوننت ساده و خالی است:

<template>
  <div>
    <h1>The Home Page</h1>
    <hr />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores, aut autem, blanditiis consequuntur
      dolore excepturi laborum maiores minima nihil non nulla obcaecati quas quibusdam quod sed suscipit vero
      voluptatem.
    </p>
  </div>
</template>

سپس در پوشه user چهار فایل دیگر به نام های User.vue و UserDetail.vue و UserEdit.vue و UserStart.vue بسازید. من محتوای این فایل ها را برایتان قرار می دهم.

محتوای user.vue:

<template>
  <h1>The User Page</h1>
</template>

محتوای UserDetail.vue:

<template>
  <h3>Some User Details</h3>
</template>

محتوای UserEdit.vue:

<template>
  <h3>Edit the User</h3>
</template>

محتوای UserStart.vue:

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

همچنین یادتان نرود که لینک بوت استرپ را در index.html وارد کنید.

حالا که ساختار پروژه را ایجاد کرده ایم باید پکیج vue-router را نصب کنیم. همانطور که گفتم Vue.js یک فریم ورک progressive است که یعنی همه چیز را در هسته اش ندارد تا حجم اولیه سبک باشد. مثلا شاید کسی نخواهد SPA بسازد و به router احتیاج نداشته باشد. در چنین حالتی چرا باید حجم سنگین تری را به خاطر کدهای router دانلود کند در صورتی که اصلا از آن ها استفاده نمی کند؟ بنابراین خودمان باید router را جداگانه و به شکل زیر نصب کنیم:

npm install vue-router --save

سپس باید router را وارد پروژه کنیم. برای این کار وارد main.js شده و می گوییم:

import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue'

Vue.use(VueRouter);

البته شما می توانید به جای VueRouter از هر نام دیگری استفاده کنید. حالا برای تعریف route ها (به معنی «مسیر») می توانیم آن ها را در یک فایل جداگانه نوشته و درون main.js وارد کنیم یا اینکه مستقیما درون main.js بنویسیم. از آنجایی که نمی خواهم main.js را شلوغ کنم، یک فایل دیگر به نام routes.js را درون پوشه src ایجاد می کنم. برای تعریف route ها باید یک آرایه را export کنیم که اعضای آن اشیاء مختلفی هستند. هر کدام از این اشیاء یک route محسوب می شود. همچنین هر route (هر شیء درون آرایه ما) یک خصوصیت به نام path دارد که مقدار آن همان مقداری است که به URL اصلی شما پیوست می شود (در ادامه متوجه می شوید). سپس خصوصیت بعدی به نام component را داریم که می گوید کدام کامپوننت در path مشخص شده، بارگذاری شود. به مثال زیر توجه کنید:

import User from './components/user/User.vue';

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

ما آرایه خود را export کرده ایم و نامش را routes گذاشته ایم. این آرایه یک شیء دارد که path آن برابر user/ بوده و کامپوننتی که باید در این path بارگذاری شود User است که همان فایل User.vue می باشد و بالاتر import شده است. یعنی اگر آدرس وب سایت شما www.example.com باشد، زمانی که کاربر به آدرس www.example.com/user برود، کامپوننتی به نام User.vue برایش نمایش داده می شود. این مسئله مهم است که path شما به آدرس اصلی وب سایت پیوست می شود.

حالا من یک route دیگر را نیز تعریف می کنم:

import User from './components/user/User.vue';
import Home from './components/Home.vue';

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

خالی گذاشتن path یعنی صفحه اصلی سایت (همان www.example.com). به عبارتی اگر کاربر به صفحه اصلی سایت ما مراجعه کرد کامپوننت Home برایش باز شود. حالا می توانیم به main.js برویم و این route ها را ثبت کنیم:

import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue'
import { routes } from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: routes
});

new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})

من ابتدا routes را از فایل خودمان import کرده ام. سپس (بعد از Vue.use) یک ثابت به نام router را تعریف کرده ام که یک نمونه، از کلاس درون پکیج VueRouter، می سازد. ما باید route های تعریف شده خود را به شکل بالا به آن پاس بدهیم که این کار را انجام داده ایم (نام خصوصیت یا key، حتما باید routes باشد اما مقدار آن همان نامی است که خودتان برای آرایه انتخاب کرده بودید). در نهایت خصوصیت router را به شیء اصلی Vue داده ام و آن را برابر ثابت خود گذاشته ام. در اینجا هم نام خصوصیت باید router باشد اما مقدار آن به سلیقه خودتان بستگی دارد.

من برای خلاصه شدن کدهای بالا از روش ES6 استفاده کرده و می گویم:

const router = new VueRouter({
  routes,
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

همانطور که می دانید در ES6 اگر نام خصوصیت با مقدار آن یکی باشد (key و value یکسان باشند) می توانیم فقط نام key را بیاوریم. حالا به App.vue می رویم تا به آن بگوییم این route ها در کجا بارگذاری شوند:

<div class="row">
    <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></router-view>
    </div>
</div>

کامپوننت route-view یک کامپوننت خاص از پکیج router-view است که به Vue می گوید کامپوننت ها را در این قسمت بارگذاری کن. حالا اگر به مرورگر برویم آدرس زیر را در آن می بینیم:

http://localhost:8080/#/

در مورد هشتگی که در انتهای URL ما اضافه شده است بعدا صحبت خواهیم کرد. فعلا آن را نادیده بگیرید. حالا اگر به آدرس زیر برویم، کامپوننت User برایمان بارگذاری می شود:

http://localhost:8080/#/user

router ما به همین سادگی آماده استفاده است!