13. پروژه [vuejs-11]: مسیریابی و ناوبری

روتینگ همان چیزی است که به کاربر امکان می‌دهد بین صفحات مختلف برنامه جابجا شود.

ساختار پروژه به شرح زیر است:

13.1. نصب وابستگی‌ها

راسته‌سازی در [Vue.js] نیازمند وابستگی [vue-router] است:

• در [1-3]، وابستگی [vue-router] نصب شده است؛
• در [4-6]، پس از نصب وابستگی، فایل [package.json] اصلاح شد؛

13.2. اسکریپت مسیریابی [router.js]

قوانین ناوبری برنامه در فایل [router.js] ذخیره می‌شوند (نام اسکریپت می‌تواند هر چیزی باشد):

// واردات مورد نیاز برای مسیریابی
import Vue from 'vue'
import VueRouter from 'vue-router'

// افزونه مسیریابی
Vue.use(VueRouter)

// کامپوننت‌های مقصد برای مسیریابی
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
import Component3 from './components/Component3.vue'


//مسیرهای برنامه
const routes = [
  //خانه
  { path: '/', name: 'home', component: Component1 },
  // Component1
  {
    path: '/vue1', name: 'vue1', component: Component1
  },
  {
    // Component2
    path: '/vue2', name: 'vue2', component: Component2
  },
  // Component3
  {
    path: '/vue3', name: 'vue3', component: Component3
  },
]

// روتر
const router = new VueRouter({
  routes,
  mode: 'history',
})

// صادرات روتر
export default router

نظرات

• اسکریپت [router.js] قواعد مسیریابی را برای برنامه ما تنظیم خواهد کرد؛
• خطوط ۱–۶: فعال‌سازی افزونه [vue-router] که برای مسیریابی لازم است. این فعال‌سازی نیازمند وارد کردن کلاس/تابع [Vue] (خط ۲) و افزونه مسیریابی (خط ۳) است. این افزونه به همراه وابستگی [router] که به تازگی نصب کرده‌ایم، نصب شده است؛
• خطوط ۸–۱۱: وارد کردن ویو‌های هدف مسیریابی؛
• خطوط ۱۵–۲۱: تعریف جدول مسیر. هر عنصر در این جدول یک شیء با ویژگی‌های زیر است:
  • [path]: URL نما، همان چیزی که می‌خواهیم در فیلد [URL] مرورگر نمایش داده شود. شما آزاد هستید هر چیزی که می‌خواهید وارد کنید؛
  • [name]: نام مسیر. در اینجا نیز می‌توانید هر چیزی را که می‌خواهید وارد کنید؛
  • [component]: کامپوننتی که نما را نمایش می‌دهد. این باید یک کامپوننت موجود باشد؛

بنابراین ما در اینجا چهار مسیر خواهیم داشت: [/, /vue1, /vue2, /vue3].

• خطوط ۳۳–۳۶: روتر یک نمونه از کلاس [VueRouter] است که در خط ۳ وارد شده است. سازنده برای [VueRouter] در اینجا با دو پارامتر استفاده می‌شود:
  • مسیرهای برنامه؛
  • یک حالت برای نوشتن URL در مرورگر: حالت پیش‌فرض، [hash]، URL را به شکل [localhost:8080/#/vue1] می‌نویسد (# نشانگر هش است). حالت [history] علامت # را حذف می‌کند؛
• خط ۳۹: روتر صادر می‌شود؛

13.3. اسکریپت اصلی [main.js]

اسکریپت اصلی [main.js] به شرح زیر است:

// واردات‌ها
import Vue from 'vue'
import App from './App.vue'

// افزونه‌ها
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// بوت‌استرپ
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// روتر
import monRouteur from './router'

// پیکربندی
Vue.config.productionTip = false

// مثال‌سازی پروژه [App]
new Vue({
  name: "app",
  // نمای اصلی
  render: h => h(App),
  // روتر
  router: monRouteur,
}).$mount('#app')

توضیحات

• خط 14: روتری که توسط اسکریپت [router.js] صادر شده، وارد می‌شود؛
• خط ۲۵: این روتر به‌عنوان پارامتر به سازنده کلاس [Vue] ارسال می‌شود، که نمای اصلی [App] را نمایش می‌دهد، که با ویژگی [router] نما مرتبط است؛

13.4. نما اصلی [App]

کد مربوط به نمای اصلی به شرح زیر است:

<template>
  <div class="container">
    <b-card>
      <!-- یک پیام -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-11] : routage et navigation</h4>
      </b-alert>
      <!--نمای مسیریابی فعلی -->
      <router-view />
    </b-card>
  </div>
</template>

<script>
  export default {
    name: "app"
  };
</script>

نظرات

• خط ۹: نمای مسیریابی فعلی را نمایش می‌دهد. تگ <router-view> تنها در صورتی شناسایی می‌شود که خاصیت [router] نما مقداردهی اولیه شده باشد؛

13.5. چیدمان نما

قالب‌بندی ویوها توسط کامپوننت زیر [Layout] انجام می‌شود:

<template>
  <!-- خط -->
  <div>
    <b-row>
      <!-- منطقهٔ سه‌ستونی -->
      <b-col cols="2" v-if="left">
        <slot name="left" />
      </b-col>
      <!-- منطقهٔ نه ستونی -->
      <b-col cols="10" v-if="right">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>

<script>
  export default {
    // تنظیمات
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

ما قبلاً از این طرح‌بندی در پروژه [vuejs-06] در بخش [vuejs-06] استفاده کرده و آن را توضیح داده‌ایم.

13.6. کامپوننت ناوبری

کامپوننت [Navigation] یک منوی ناوبری را در اختیار کاربر قرار می‌دهد:

کامپوننتی که بلوک [1] را تولید می‌کند به شرح زیر است:

<template>
  <!-- منوی بوت‌استرپ سه‌گزینه‌ای -->
  <b-nav vertical>
    <b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>
    <b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>
    <b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>
  </b-nav>
</template>

• این کد بلوک ۱ را تولید می‌کند که شامل سه لینک برای ناوبری است؛
• ویژگی [to] تگ‌های <b-nav-item> باید با یکی از خواص [path] مسیرهای راوتر برنامه مطابقت داشته باشد؛

13.7. نماها

نما شماره ۱ به شرح زیر است:

منطقه‌های [3-4] توسط مؤلفهٔ [Component1] زیر تولید می‌شوند:

<template>
  <Layout :left="true" :right="true">
    <!-- ناوبری -->
    <Navigation slot="left" />
    <!-- پیام-->
    <b-alert show variant="primary" slot="right">Vue 1</b-alert>
  </Layout>
</template>

<script>
  import Navigation from './Navigation';
  import Layout from './Layout';

  export default {
    name: "component1",
    // کامپوننت‌های استفاده شده
    components: {
      Layout, Navigation
    }
  };
</script>

نظرات

• خط ۲: نما شماره ۱ از چیدمان کامپوننت [Layout] استفاده می‌کند که شامل دو اسلات به نام‌های [left, right] است؛
• خط ۴: منوی ناوبری در اسلات سمت چپ قرار می‌گیرد. این همان ناحیه [3] است که در بالا نشان داده شده است؛
• خط ۶: پیامی در اسلات سمت راست قرار می‌گیرد. این همان ناحیه‌ای است که با برچسب [4] در بالا نشان داده شده است؛

نماهای ۲ و ۳ مشابه هستند.

نما شمارهٔ ۲ نمایش‌داده‌شده توسط مؤلفهٔ [Component2]:

<!-- نما شمارهٔ ۲ -->
<template>
  <Layout :left="true" :right="true">
    <!-- ناوبری -->
    <Navigation slot="left" />
    <!-- پیام -->
    <b-alert show variant="secondary" slot="right">Vue 2</b-alert>
  </Layout>
</template>

<script>
  import Navigation from './Navigation';
  import Layout from './Layout';

  export default {
    name: "component2",
    // اجزای نما
    components: {
      Layout, Navigation
    }
  };
</script>

نما شماره ۳ نمایش داده شده توسط مؤلفه [Component3]:

<!--نما شماره ۳ -->
<template>
  <Layout :left="true" :right="true">
    <!-- ناوبری -->
    <Navigation slot="left" />
    <!-- پیام -->
    <b-alert show variant="info" slot="right">Vue 3</b-alert>
  </Layout>
</template>

<script>
  import Navigation from "./Navigation";
  import Layout from "./Layout";

  export default {
    name: "component3",
    // اجزای نما
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. اجرای پروژه

پس از اجرا، نمای زیر نمایش داده می‌شود:

• در [1]، URL همان [http://localhost:8080] است. بنابراین قاعده مسیریابی زیر اجرا شد:

{ path: '/', name: 'home', component: Component1 }

بنابراین، کامپوننت [Component1] نمایش داده شد. این کامپوننت نما شماره ۱، یعنی [2] را نمایش می‌دهد. اکنون روی لینک [Vue 1] کلیک کنیم، که کد آن به شرح زیر است:

<b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>

اکنون نمایش به شکل زیر تغییر می‌کند:

• در [3]، قاعده مسیریابی زیر اجرا شد:

path: '/vue1', name: 'vue1', component: Component1

بنابراین بار دیگر مؤلفه [Component1] نمایش داده شد و در نتیجه نما شماره ۱، [4]. اکنون بیایید روی پیوند [Vue 2] کلیک کنیم، کدی که برای آن به شرح زیر است:

<b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>

نمای جدید سپس به شرح زیر است:

• در [5]، قاعده مسیریابی زیر اجرا شد:

path: '/vue2', name: 'vue2', component: Component2

بنابراین، کامپوننت [Component2] نمایش داده شد و در نتیجه نما شمارهٔ ۲. اگر اکنون روی لینک [Vue 3] کلیک کنیم، که کد آن به شرح زیر است:

<b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>

نمای جدید زیر به ما نمایش داده می‌شود:

• در [6]، قاعده مسیریابی زیر اجرا شد:

path: '/vue3', name: 'vue3', component: Component3

بنابراین، کامپوننت [Component3] نمایش داده شد، یعنی نما شماره ۳ [8].