close

Routing وفي Navigation .js Vue- دليل شامل

Routing وهي Navigation مفاهيم أساسية في Vue.js لإنشاء الصفحات والتنقل بينها في تطبيق ويب. هي مكتبة قوية ومرنة لإدارة النظام في .js. Vue Router routing Vue

 

فيما يلي المفاهيم الأساسية المتعلقة بـ route s in Vue.js:

  1. Route: route يعرّف المسار A ويربطه بالمكوّن المقابل. لكل منها route مسار ومكون.

  2. Vue Router: هي مكتبة لإدارة s في .js. يوفر أدوات لتحديد وإدارة التطبيقات في التطبيق. Vue Router route Vue route Vue

  3. Route المكون: لكل منها route مكون مطابق. عند route تنشيط a ، سيتم عرض المكون المرتبط.

  4. ديناميكي Route: يسمح لك الديناميكي route بتعريف route s مع معلمات ديناميكية. على سبيل المثال ، يمكنك تحديد a route بالمسار "/ user /: id" لعرض معلومات المستخدم بالمعرف المقابل.

  5. متداخل Route: المفهوم المتداخل route هو مفهوم يسمح لك بوضع الأطفال route داخل أحد الوالدين route. يمكّنك هذا من بناء route هياكل معقدة وتنظيم المكونات بطريقة متداخلة.

  6. إعادة التوجيه Route: route تسمح لك إعادة التوجيه بإعادة توجيه المستخدمين من مسار إلى آخر. يكون هذا مفيدًا عندما تريد route للمستخدمين الانتقال من مسار قديم إلى مسار جديد.

  7. Route الحرس: route الحارس هو وظيفة تتيح لك التحقق من الوصول إلى route s. باستخدام route وسائل الحماية ، يمكنك تحديد شروط لمنع المستخدمين من الوصول إلى route عناصر معينة أو إجراء معالجة خاصة قبل إعادة التوجيه.

 

للاستخدام ، يمكنك اتباع الخطوات التالية: Vue Router

الخطوة 1: التثبيت باستخدام npm أو الغزل: Vue Router 

npm install vue-router

أو 

yarn add vue-router

الخطوة 2: قم بإنشاء ملف في الدليل الجذر للمشروع. في هذا الملف ، سنعلن ونقوم بتهيئة تطبيقات التطبيق. router.js route 

import Vue from 'vue';  
import VueRouter from 'vue-router';  
  
Vue.use(VueRouter);  
  
const router = new VueRouter({
  routes: [  
    // Declare routes here  
  ]  
});  
  
export default router;

الخطوة 3: في main.js الملف ، قم باستيراده واربطه بالتطبيق: Vue Router Vue 

import Vue from 'vue';  
import App from './App.vue';  
import router from './router';  
  
new Vue({
  router,  
  render: h => h(App),  
}).$mount('#app');

الخطوة 4: في الملف ، يمكنك التصريح باستخدام مكونات مثل ، و ، وخصائص أخرى. router.js route Vue Router path component

على سبيل المثال ، يمكنك التصريح route عن للصفحة الرئيسية وعن route الصفحة على النحو التالي:

import Home from './components/Home.vue';  
import About from './components/About.vue';  
  
const router = new VueRouter({
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About }  
  ]  
});

الخطوة 5: في Vue المكونات ، يمكنك استخدام مكونات مثل إنشاء روابط إلى روابط أخرى ، ولعرض محتوى التيار. <router-link> route <router-view> route

على سبيل المثال ، في قالب مكون الصفحة الرئيسية ، يمكنك استخدامه لإنشاء ارتباط إلى صفحة "حول": <router-link> 

<router-link to="/about">Go to About</router-link>

في قالب مكون التطبيق ، يمكنك استخدامه لعرض محتوى الحالي: <router-view> route 

<router-view></router-view>

من خلال هذه الخطوات ، تكون قد قمت بالإعداد والاستخدام للإدارة وفي تطبيق .js الخاص بك. Vue Router routing navigation Vue