راهنمای مسیریاب Vue

معرفی

هنگام توسعه برنامه های وب با Vue.js، مگر اینکه در حال ساختن یک برنامه تک صفحه ای (SPA)، می خواهید چندین صفحه را به یک صفحه فرود متصل کنید تا به کاربران اجازه دهید در آنها پیمایش کنند. این به عنوان شناخته شده است مسیریابی.

مسیریابی فرآیندی است که توسط آن کاربر به صفحات مختلف یک وب سایت هدایت می شود. Vue.js یک فریمورک جاوا اسکریپت است که برای ایجاد برنامه های صفحه تک استفاده می شود، به این معنی که این برنامه فقط یک بار از سرور به مرورگر بارگیری می شود و مرورگر نیازی به بارگیری مجدد در هنگام مسیریابی ندارد. در عوض، به سادگی این صفحات را درخواست می کند و آنها بارگذاری می شوند.

در این راهنما، نحوه انجام مسیریابی با Vue.js را یاد می گیریم و انواع مختلف مسیریابی را که می توان انجام داد و نحوه انجام آنها را بررسی می کنیم.

شروع شدن

مسیریابی در Vue.js با انجام می شود روتر Vue، که در پشت سر هم با کتابخانه هسته Vue کار می کند تا به ما امکان می دهد یک سیستم مسیریابی را راه اندازی کنیم. ما می خواهیم استفاده کنیم vue-router در دو سناریو در پروژه ما. ما یا می خواهیم از روتر در یک پروژه موجود استفاده کنیم یا آن را در حین ایجاد یک پروژه جدید اضافه کنیم.

راه اندازی روتر Vue در پروژه موجود

ادغام vue-router به یک پروژه موجود می تواند فنی باشد، و ما اکنون به این جزئیات خواهیم پرداخت. اولین قدم نصب بسته روتر vue با استفاده از دستور زیر است:

! npm install vue-router@4

پس از نصب، به مسیر بروید src پوشه و پوشه ای به نام ایجاد کنید router، به دنبال آن یک فایل به نام index.js در router پوشه، که به عنوان فایل پیکربندی روتر ما عمل خواهد کرد. ما src دایرکتوری اکنون به شکل زیر خواهد بود:

در index.js بیایید مطمئن شویم که کد زیر را که کد پیکربندی روتر است، قرار داده ایم:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

ما routes آرایه ای که شامل یک شی واحد است، که می تواند چندین شی باشد که در آن هر شی یک مسیر واحد را نشان می دهد. در حال حاضر، ما فقط یکی را ایجاد کردیم که به مؤلفه صفحه اصلی هدایت می شود.

هرکدام از اینها routes اشیاء به طور معمول از تشکیل شده است path، که مسیر url نسبت به ریشه سایت، the name، که به عنوان یک شناسه عمل می کند، و component، که در بالای صفحه وارد کردیم.

جدا از آرایه مسیر، نمونه روتر را در پایین با ایجاد یک تنظیم می کنیم createRouter() عملکرد و عبور در history مقادیر کلیدی و routes آرایه، و سپس ما صادر می کنیم router نمونه ای برای استفاده در برنامه ما.

برای استفاده از این پیکربندی روتر در برنامه ما، آن را باز کنید main.js فایل در src پوشه ، import router from "./router"، و سپس اضافه کنید .use(router) میان createApp(App) و .mount('#app') همانطور که در زیر آمده است:

import router from './router' createApp(App).use(router).mount('#app')

این vue-router به صورت جهانی در برنامه ما پیکربندی شده است و قدم بعدی استفاده از آن در برنامه ما است. این به راحتی با گنجاندن انجام می شود <router-view /> در داخل App.js تگ الگو، که فقط مسیر منطبق را ارائه می کند:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

راه اندازی مسیرها در Vue.js

مسیرها معمولا در ایجاد می شوند router/index.js آرایه مسیرهای فایل، و این مسیرها به مؤلفه ها متصل می شوند. ایجاد یک پوشه views که در آن تمام نماهای صفحه ذخیره می شود، تمرین خوبی است. مثلا:

در این مرحله ما اکنون می دانیم که چگونه مسیرها را به صورت دستی تنظیم کنیم.

روتر Vue را با Vue CLI نصب کنید

اگر قرار است پروژه جدیدی ایجاد کنیم و باور داشته باشیم که از آن استفاده خواهیم کرد vue-router، انجام این کار هنگام ایجاد پروژه آسان تر است.

تنها کاری که باید انجام دهیم این است که از Vue CLI برای نصب آخرین نسخه استفاده کنیم vue-router در حین انتخاب دستی ویژگی ها در فرآیند ایجاد پروژه ما:

درباره ایجاد پروژه Vue.js از طریق ما بیشتر بخوانید و بیاموزید راهنمای Vue CLI!

بارگیری مسیرهای تنبل با روتر Vue

همانطور که برنامه ما در اندازه بزرگ می شود، اندازه بسته بزرگتر می شود و باعث می شود بارگذاری سایت ما بیشتر طول بکشد. ما میتوانیم استفاده کنیم vue-router برای اجرای بارگذاری تنبل برای جلوگیری از بارگیری برخی از مسیرهای خاص تا زمانی که کاربر به طور خاص آنها را درخواست کند.

این معمولاً در فایل پیکربندی روتر با حذف کردن انجام می شود import عبارت در بالا و جایگزینی آن با یک دستور import پویا در گزینه جزء مسیر ما:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

پیمایش بین مسیرها با

تاکنون توانسته‌ایم مسیرهایی ایجاد کنیم، اما چگونه می‌توانیم در برنامه خود حرکت کنیم؟ ما استفاده می کنیم <router-link> به جای برچسب <a> عنصری در HTML برای مدیریت مسیریابی.

به عنوان مثال، اگر می‌خواهیم یک نوار ناوبری در بالای برنامه خود ایجاد کنیم، می‌توانیم این کار را در قسمت زیر انجام دهیم App.js فایل بالای <router-view/> تگ کنید تا در همه مسیرها نشان داده شود:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

روتر-لینک می پذیرد to='path' ویژگی که کاربر را به مسیر کامپوننت همانطور که هنگام پیکربندی مسیر تنظیم کرده است می برد. این کار مانند href='path``' ویژگی در HTML

استفاده از مسیرهای نامگذاری شده

استفاده از مسیرهای نامگذاری شده به ما اجازه می دهد تا در مسیر عبور کنیم name کلیدی که به name ویژگی که در هنگام پیکربندی مسیرها به جای استفاده از مسیر با اتصال داده ها به این صورت تنظیم می کنیم:

<router-link :to="{ name: 'About' }">About</router-link>

یکی از مزیت‌های استفاده از این روش این است که در صورتی که تصمیم به تغییر مسیر مسیر برای برنامه‌های بزرگ خود داشته باشیم، نیازی به تغییر مسیر همه پیوندها که ممکن است دست و پا گیر باشد، نداریم.

مسیریابی پویا

ممکن است شرایطی ایجاد شود که استفاده از مسیریابی پویا را برای جلوگیری از تکرار غیرضروری صفحه ضروری کند. به عنوان مثال، فرض کنید ما لیستی از میوه ها داریم و می خواهیم که کاربر بتواند روی یک میوه خاص کلیک کند و فقط جزئیات مربوط به آن میوه در صفحه جزئیات میوه نمایش داده شود. در این مورد از مسیریابی پویا استفاده می کنیم.

ما دو صفحه داریم - یکی برای نمایش میوه ها در یک لیست و دیگری برای نمایش جزئیات هر میوه، که یک صفحه "طرح" است که با جزئیات میوه پر می شود. ما صفحات را در پوشه Vue ایجاد می کنیم و سپس مسیرها را به پوشه اضافه می کنیم routes آرایه:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

ما متوجه خواهیم شد که برای FruitDetails صفحه، ما یک پویا اضافه کردیم id دارایی پس از آن می شود id پارامتر و از آن برای پرس و جو کردن داده های خاصی که در آن صفحه نشان داده می شود استفاده می کند $route.params در قالب ما، بنابراین مسیر را پویا می کنیم.

در FruitsPage، فرض کنید آرایه ای از میوه ها داریم که در برنامه خود حلقه می زنیم، می توانیم هر میوه را با یک پیوند در کنار پارامترها به این ترتیب بپیچیم:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

در این مرحله وقتی کاربر روی هر میوه کلیک می کند، آن را به سمت میوه می برد FruitDetails صفحه ای که می توانیم به آن دسترسی داشته باشیم id پارامتر و از آن برای تشخیص اینکه کدام میوه باید در قسمت نشان داده شود استفاده کنید FruitDetails احتمال برد مراجعه کنید.

دسترسی به پارامترهای مسیر

تا کنون دیده‌ایم که چگونه می‌توان پارامترها را به صورت پویا به یک صفحه خاص منتقل کرد، اکنون ببینیم چگونه می‌توانیم به آن پارامتر در صفحه خود دسترسی پیدا کنیم. FruitDetails صفحه دو راه برای دسترسی به پارامترها در Vue وجود دارد - از طریق $route.params یا استفاده از وسایل:

با استفاده از $route.params

پارامترها مستقیماً از طریق قابل دسترسی هستند $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

یا می توانیم در داخل خود به آن دسترسی داشته باشیم data() روش با استفاده از this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

استفاده از Vue Props

یکی دیگر از روش های آسان برای دسترسی به داده ها به صورت پویا از طریق مسیرها استفاده از props است. ابتدا باید تنظیم کنیم props به true در شیء پیکربندی مسیرها:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

به این ترتیب، تنها کاری که باید انجام دهیم این است که اضافه کنیم props گزینه به script تگ کنید و سپس از ابزارهای موجود در ما استفاده کنید template برچسب:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

خطاهای 404 - مسیر یافت نشد

در صورتی که کاربر به مسیری که وجود ندارد پیمایش کند، Vue صفحه را بدون هیچ مؤلفه بارگیری می کند و یک صفحه خالی تولید می کند. در این مورد، بهترین کار این است که یک صفحه 404 را با شاید یک دکمه نمایش دهید که آنها را به صفحه اصلی یا هر جایی که ما فکر می کنیم مایلند بروند.

با ایجاد یک کامپوننت برای صفحه 404 ما و سپس افزودن مسیر 404 به آرایه مسیرهای فایل پیکربندی روتر، این کار به راحتی قابل کنترل است، اما این بار از یک عبارت معمولی برای گرفتن همه مسیرهایی که قبلاً اعلام نشده‌اند استفاده می‌کنیم:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

La :catchAll بخش پویا است که بیان منظمی از آن را دریافت می کند (.*) که در آن Vue Router برای بررسی اینکه آیا مسیری که کاربر به آن پیمایش می کند در فایل پیکربندی روتر ما تعریف شده است یا خیر استفاده می کند. اگر چنین مسیرهایی وجود نداشته باشد، کاربر به کامپوننت هدایت می شود که در مورد ما این است ErrorPage جزء:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

تغییر مسیرها

در شرایطی که می‌خواهیم کاربران هنگام بازدید از یک مسیر خاص هدایت شوند، به عنوان مثال، اگر یک مسیر قبلی داشتیم که دیگر از آن استفاده نمی‌کنیم، می‌خواهیم کاربران هنگام بازدید از آن مسیر به مسیر جدید هدایت شوند. این کار به راحتی با افزودن یک شی جدید به آرایه پیکربندی مسیرها، با a انجام می شود redirect رشته:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

تمام کارهایی که در بالا انجام می دهد این است که در صورت بازدید کاربر، مسیر /all-fruits، آنها را به مسیر هدایت می کند /fruits مسیر.

ناوبری برنامه ای

تا کنون، ما چیزهای زیادی در مورد مسیریابی یاد گرفته‌ایم، اما یک چیز دیگر وجود دارد که باید بدانید: نحوه انجام ناوبری برنامه‌ای. ما پیمایش برنامه‌ای را به عنوان موقعیتی تعریف می‌کنیم که در آن کاربر بر اساس یک عمل خاص که در یک مسیر رخ می‌دهد، مانند یک اقدام ورود یا ثبت نام، یا با کلیک کردن روی یک دکمه خاص، مانند دکمه «بازگشت»، هدایت/هدایت می‌شود.

تاریخچه روتر

ما می توانیم از تاریخچه مرورگر برای پیمایش آسان به عقب یا جلو، بسته به ترجیحات خود استفاده کنیم. اگر به خاطر دارید، ما یک createRouter() عملکرد را در فایل پیکربندی روتر که در آن a را تنظیم کردیم history مقدار، به روتر Vue اجازه می دهد تا تاریخچه روتر ما را در حین مسیریابی از طریق برنامه وب پیگیری کند.

این به ما امکان می‌دهد تا تاریخچه مرورگر را بر اساس یک کلیک شرطی مانند کلیک روی دکمه مرور کنیم:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

ما همچنین می توانیم تصمیم بگیریم که با استفاده از 1 بجای -1 و فرض کنید می خواهیم 2 مرحله حرکت کنیم که می توانیم از هر کدام استفاده کنیم 2 or -2.

فشار

push() معمولاً پس از انجام یک عمل استفاده می شود و یک ورودی جدید به پشته تاریخ اضافه می کند. به عنوان مثال، اگر کاربری با موفقیت وارد سیستم شود، می‌خواهیم به صورت برنامه‌نویسی به صفحه داشبورد هدایت شویم. این با گنجاندن روش فشار در کنار نام مسیر انجام می شود:

this.$router.push({ name: 'Dashboard' });

نتیجه

مسیریابی یکی از قابلیت های اصلی Vue است. مگر اینکه در حال ساختن یک برنامه تک صفحه ای (SPA)، می خواهید چندین صفحه را به یک صفحه فرود متصل کنید تا به کاربران اجازه دهید در آنها پیمایش کنند.

در این راهنما، نگاهی انداخته ایم به اینکه مسیریابی چیست، چگونه می توانید آن را نصب کنید vue-router در پروژه‌های جدید و موجود، نحوه انجام بارگذاری تنبل، پیمایش بین مسیرها، انجام مسیریابی پویا، پارامترهای مسیر دسترسی و ناوبری برنامه‌ریزی انجام می‌شود.

• Coinsmart. بهترین صرافی بیت کوین و کریپتو اروپا.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی رایگان.
• CryptoHawk. رادار آلت کوین امتحان رایگان.
• منبع: https://stackabuse.com/guide-to-vue-router/