جهاز التوجيه Vue

كيفية استخدام Vue Router ، أحد الأجزاء الأساسية لتطبيق Vue

مقدمة

في تطبيق ويب JavaScript ، يعد جهاز التوجيه هو الجزء الذي يقوم بمزامنة العرض المعروض حاليًا مع محتوى شريط عنوان المستعرض.

بمعنى آخر ، إنه الجزء الذي يجعل عنوان URL يتغير عند النقر فوق شيء ما في الصفحة ، ويساعد في إظهار طريقة العرض الصحيحة عندما تضغط على عنوان URL معين.

تقليديا ، يتم إنشاء الويب حول عناوين URL. عندما تضغط على عنوان URL معين ، يتم عرض صفحة معينة.

مع إدخال التطبيقات التي تعمل داخل المتصفح وتغيير ما يراه المستخدم ، كسرت العديد من التطبيقات هذا التفاعل ، وكان عليك تحديث عنوان URL يدويًا باستخدام واجهة برمجة تطبيقات السجل الخاصة بالمتصفح.

تحتاج إلى جهاز توجيه عندما تحتاج إلى مزامنة عناوين URL مع طرق العرض في تطبيقك. إنها حاجة شائعة جدًا ، وجميع الأطر الحديثة الرئيسية تسمح لك الآن بإدارة التوجيه.

مكتبة Vue Router هي الطريقة المثلى لتطبيقات Vue.js. لا تفرض Vue استخدام هذه المكتبة. يمكنك استخدام أي مكتبة توجيه عامة تريدها ، أو أيضًا إنشاء تكامل History API الخاص بك ، ولكن فائدة استخدام Vue Router هي أنهالرسمية.

هذا يعني أنه يتم صيانته من قبل نفس الأشخاص الذين يحافظون على Vue ، لذلك تحصل على تكامل أكثر اتساقًا في إطار العمل ، والضمان أنه سيكون دائمًا متوافقًا في المستقبل ، بغض النظر عن السبب.

تثبيت

يتوفر Vue Router عبرnpmمع الحزمة المسماةvue-router.

إذا كنت تستخدم Vue عبر علامة البرنامج النصي ، فيمكنك تضمين Vue Router باستخدام

<script src="https://unpkg.com/vue-router"></script>

unpkg.com هي أداة مفيدة للغاية تجعل كل حزمة npm متاحة في المتصفح برابط بسيط

إذا كنت تستخدم ملفVue CLI، قم بتثبيته باستخدام

npm install vue-router

بمجرد التثبيتvue-routerوإتاحته إما باستخدام علامة البرنامج النصي أو عبر Vue CLI ، يمكنك الآن استيراده في تطبيقك.

يمكنك استيراده بعدvueوانت تتصلVue.use(VueRouter)إلىتثبيتداخل التطبيق:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

بعد الاتصالVue.use()تمرير كائن جهاز التوجيه ، في أي مكون من مكونات التطبيق ، يمكنك الوصول إلى هذه الكائنات:

  • this.$routerهو كائن جهاز التوجيه
  • this.$routeهو كائن المسار الحالي

كائن جهاز التوجيه

كائن جهاز التوجيه ، الذي تم الوصول إليه باستخدامthis.$routerمن أي مكون عند تثبيت Vue Router في مكون الجذر Vue ، يوفر العديد من الميزات الرائعة.

يمكننا جعل التطبيق ينتقل إلى طريق جديد باستخدام

  • this.$router.push()
  • this.$router.replace()
  • this.$router.go()

التي تشبهpushStateوreplaceStateوgoأساليب واجهة برمجة تطبيقات التاريخ.

push()يُستخدم للانتقال إلى مسار جديد ، مع إضافة عنصر جديد إلى محفوظات المستعرض.replace()هو نفسه ، إلا أنه لا يدفع دولة جديدة إلى التاريخ.

عينات الاستخدام:

this.$router.push('about') //named route, see later
this.$router.push({ path: 'about' })
this.$router.push({ path: 'post', query: { post_slug: 'hello-world' } }) //using query parameters (post?post_slug=hello-world)
this.$router.replace({ path: 'about' })

go()يتنقل ذهابًا وإيابًا ، ويقبل رقمًا يمكن أن يكون موجبًا أو سالبًا للعودة إلى السجل:

this.$router.go(-1) //go back 1 step
this.$router.go(1) //go forward 1 step

تحديد الطرق

أنا أستخدممكون ملف واحد Vueفي هذا المثال.

في النموذج أستخدم ملفnav tag that has 3 router-linkالمكونات ، التي لها تسمية (الصفحة الرئيسية / تسجيل الدخول / حول) وعنوان URL المعين من خلال ملفtoينسب.

الrouter-viewالمكون هو المكان الذي سيضع فيه Vue Router المحتوى الذي يطابق عنوان URL الحالي.

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/login">Login</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

أrouter-linkالمكون يجعل ملفaبشكل افتراضي (يمكنك تغيير ذلك). في كل مرة يتغير المسار ، إما عن طريق النقر فوق ارتباط أو عن طريق تغيير عنوان URL ، أrouter-link-activeتتم إضافة class إلى العنصر الذي يشير إلى المسار النشط ، مما يتيح لك تصميمه.

In the JavaScript part we first include and install the router, then we define 3 مكونات الطريق.

نقوم بتمريرها لتهيئة ملفrouterكائن ، ونمرر هذا الكائن إلى مثيل Vue root.

ها هو الكود:

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: ‘<div>Home</div>’ }

const Login = { template: ‘<div>Login</div>’ }

const About = { template: ‘<div>About</div>’ }

const router = new VueRouter({ routes: [ { path: ‘/’, component: Home }, { path: ‘/login’, component: Login }, { path: ‘/about’, component: About } ] })

new Vue({ router }).$mount(’#app’) </script>

عادةً ، في تطبيق Vue ، يمكنك إنشاء تطبيق الجذر وتثبيته باستخدام:

new Vue({
  render: h => h(App)
}).$mount('#app')

عند استخدام جهاز التوجيه Vue ، فإنك لا تمر بامتدادrenderلكنك تستخدم بدلاً من ذلكrouter.

الصيغة المستخدمة في المثال أعلاه:

new Vue({
  router
}).$mount('#app')

هو اختصار ل

new Vue({
  router: router
}).$mount('#app')

انظر في المثال ، مررنا أroutesمجموعة لVueRouterالبناء. كل مسار في هذه المجموعة يحتوي على ملفpathوcomponentبارامز.

إذا قمت بتمريرnameparam أيضًا ، لديك ملفالطريق المسمى.

استخدام المسارات المسماة لتمرير المعلمات إلى طرق الدفع والاستبدال الخاصة بالموجه

هل تتذكر كيف استخدمنا كائن جهاز التوجيه لدفع حالة جديدة من قبل؟

this.$router.push({ path: 'about' })

باستخدام المسار المحدد ، يمكننا تمرير المعلمات إلى المسار الجديد:

this.$router.push({ name: 'post', params: { post_slug: 'hello-world' } })

الشيء نفسه ينطبق علىreplace():

this.$router.replace({ name: 'post', params: { post_slug: 'hello-world' } })

سيعرض التطبيق مكون المسار الذي يتطابق مع عنوان URL الذي تم تمريره إلى الارتباط.

يتم إنشاء مثيل لمكون التوجيه الجديد الذي يتعامل مع عنوان URL ويتم استدعاء أدوات الحماية الخاصة به ، وسيتم إتلاف مكون المسار القديم.

حراس الطريق

منذ أن ذكرناحراس، دعنا نقدمهم.

يمكنك التفكير فيهم في خطاطيف دورة الحياة أو البرامج الوسيطة ، وهي وظائف تسمى في أوقات محددة أثناء تنفيذ التطبيق. يمكنك القفز في تنفيذ المسار وتعديله ، وإعادة توجيه الطلب أو إلغائه.

يمكن أن يكون لديك حراس عالميون عن طريق إضافة رد نداء إلىbeforeEach()وafterEach()خاصية جهاز التوجيه.

  • beforeEach()يتم استدعاؤه قبل تأكيد الملاحة
  • beforeResolve()يتم استدعاء عندما يتم تنفيذ beforeEach وجميع المكوناتbeforeRouterEnterوbeforeRouteUpdateيتم استدعاء الحراس ، ولكن قبل تأكيد الملاحة. الاختيار النهائي ، إذا كنت تريد
  • afterEach()يتم استدعاؤه بعد تأكيد الملاحة

ماذا تعني عبارة "تم تأكيد الملاحة"؟ سنراه في ثانية. في غضون ذلك ، فكر في الأمر على أنه "يمكن للتطبيق الانتقال إلى هذا الطريق".

الاستخدام:

this.$router.beforeEach((to, from, next) => {
  // ...
})
this.$router.afterEach((to, from) => {
  // ...
})

toوfromتمثل كائنات المسار التي نذهب إليها ومنها.beforeEachله معلمة إضافيةnextوالتي إذا اتصلنا بهاfalseكمعامل ، سيحظر التنقل ويتسبب في عدم تأكيده. كما هو الحال في Node middleware ، إذا كنت مألوفًا ، فيجب دائمًا استدعاء () التالي وإلا فسيتعطل التنفيذ.

تحتوي مكونات المسار الأحادي أيضًا على واقيات:

  • beforeRouteEnter(from, to, next)يتم استدعاؤه قبل تأكيد المسار الحالي
  • beforeRouteUpdate(from, to, next)يتم استدعاؤه عندما يتغير المسار ولكن المكون الذي يديره لا يزال كما هو (مع التوجيه الديناميكي ، انظر التالي)
  • beforeRouteLeave(from, to, next)عندما نبتعد عن هنا

ذكرنا الملاحة. لتحديد ما إذا تم تأكيد التنقل إلى مسار ما ، يقوم Vue Router بإجراء بعض الفحوصات:

  • يدعوbeforeRouteLeaveحارس في المكون (المكونات) الحالي
  • يستدعي جهاز التوجيهbeforeEach()يحمي
  • يستدعي الbeforeRouteUpdate()في أي مكون يحتاج إلى إعادة استخدامه ، إن وجد
  • يستدعي الbeforeEnter()حارس على كائن الطريق (لم أذكره ولكن يمكنك النظرهنا)
  • يستدعي الbeforeRouterEnter()في المكون الذي يجب أن ندخل فيه
  • يستدعي جهاز التوجيهbeforeResolve()يحمي
  • إذا كان كل شيء على ما يرام ، تم تأكيد الملاحة!
  • يستدعي جهاز التوجيهafterEach()يحمي

يمكنك استخدام أدوات الحماية الخاصة بالمسار (beforeRouteEnterوbeforeRouteUpdateفي حالة التوجيه الديناميكي) مثل خطافات دورة الحياة ، حتى تتمكن من البدءطلبات جلب البياناتعلى سبيل المثال.

التوجيه الديناميكي

يوضح المثال أعلاه طريقة عرض مختلفة بناءً على عنوان URL ، مع معالجة ملف/و/loginو/aboutالطرق.

هناك حاجة شائعة جدًا وهي التعامل مع المسارات الديناميكية ، مثل وضع جميع المنشورات تحت/post/، كل منها يحمل اسم سبيكة:

  • /post/first
  • /post/another-post
  • /post/hello-world

يمكنك تحقيق ذلك باستخدام شريحة ديناميكية.

كانت تلك شرائح ثابتة:

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: Login },
    { path: '/about', component: About }
  ]
})

نضيف شريحة ديناميكية للتعامل مع منشورات المدونة:

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/post/:post_slug', component: Post },
    { path: '/login', component: Login },
    { path: '/about', component: About }
  ]
})

لاحظ ال:post_slugبناء الجملة. هذا يعني أنه يمكنك استخدام أي سلسلة ، وسيتم تعيينها إلى ملفpost_slugنائب.

أنت لا تقتصر على هذا النوع من بناء الجملة. يعتمد Vue علىهذه المكتبةلتحليل المسارات الديناميكية ، يمكنك استخدامالتعبيرات العادية.

الآن داخل مكون Post route يمكننا الرجوع إلى المسار باستخدام$route، والسابقة اللاحقة باستخدام$route.params.post_slug:

const Post = {
  template: '<div>Post: {{ $route.params.post_slug }}</div>'
}

يمكننا استخدام هذه المعلمة لتحميل المحتويات من الواجهة الخلفية.

يمكن أن يكون لديك أي عدد تريده من الشرائح الديناميكية ، في نفس عنوان URL:

/post/:author/:post_slug

تذكر عندما تحدثنا قبل ذلك عما يحدث عندما ينتقل المستخدم إلى طريق جديد؟

في حالة الطرق الديناميكية ، يختلف ما يحدث قليلاً.

نظرًا لأن تكون أكثر كفاءة بدلاً من تدمير مكون المسار الحالي وإعادة إنشاء مثيل له ، فإنه يعيد استخدام المثيل الحالي.

عندما يحدث هذا ، يستدعي Vue ملفbeforeRouteUpdateحدث دورة الحياة. هناك يمكنك إجراء أي عملية تحتاجها:

const Post = {
  template: '<div>Post: {{ $route.params.post_slug }}</div>'
  beforeRouteUpdate(to, from, next) {
    console.log(`Updating slug from ${from} to ${to}`)
    next() //make sure you always call next()
  }
}

استخدام الدعائم

في الأمثلة ، اعتدت$route.params.*للوصول إلى بيانات الطريق. لا ينبغي أن يقترن أحد المكونات بجهاز التوجيه بإحكام ، وبدلاً من ذلك ، يمكننا استخدام الدعائم:

const Post = {
  props: ['post_slug'],
  template: '<div>Post: {{ post_slug }}</div>'
}

const router = new VueRouter({ routes: [ { path: ‘/post/:post_slug’, component: Post, props: true } ] })

لاحظ الprops: trueتم تمريره إلى كائن التوجيه لتمكين هذه الوظيفة.

طرق متداخلة

قبل أن أذكر أنه يمكنك الحصول على أي عدد تريده من الشرائح الديناميكية ، في نفس عنوان URL ، مثل:

/post/:author/:post_slug

لذلك ، لنفترض أن لدينا مكون مؤلف يعتني بالقسم الديناميكي الأول:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script> import Vue from ‘vue’ import VueRouter from ‘vue-router’

Vue.use(VueRouter)

const Author = { template: ‘<div>Author: {{ $route.params.author}}</div>’ }

const router = new VueRouter({ routes: [ { path: ‘/post/:author’, component: Author } ] })

new Vue({ router }).$mount(’#app’) </script>

يمكننا إدخال ثانيةrouter-viewمثيل المكون داخل قالب المؤلف:

const Author  = {
  template: '<div>Author: {{ $route.params.author}}<router-view></router-view></div>'
}

نضيف مكون Post:

const Post = {
  template: '<div>Post: {{ $route.params.post_slug }}</div>'
}

ثم سنقوم بحقن المسار الديناميكي الداخلي في تكوين VueRouter:

const router = new VueRouter({
  routes: [{
    path: '/post/:author',
    component: Author,
    children: [
      path: ':post_slug',
      component: Post
    ]
  }]
})

تحميل مجانيكتيب Vue


المزيد من دروس vue: