از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای مسیریاب Vue هنگام توسعه برنامه های وب با Vue.js، مگر اینکه در حال ساخت یک برنامه تک صفحه ای (SPA) باشید، می خواهید چندین صفحه را به یک فرود متصل کنید. page تا کاربران بتوانند در میان آنها حرکت کنند. این به عنوان مسیریابی شناخته می شود. مسیریابی است process که توسط آن کاربر به صفحات مختلف هدایت می شود روی…
سرفصلهای مطلب
معرفی
هنگام توسعه برنامه های وب با Vue.js، مگر اینکه در حال ساختن یک برنامه تک صفحه ای (SPA)، می خواهید چندین صفحه را به یک فرود متصل کنید page برای اینکه کاربران بتوانند از طریق آنها حرکت کنند. این به عنوان شناخته شده است مسیریابی.
مسیریابی است process که توسط آن کاربر به صفحات مختلف حرکت می کند روی یک وبسایت. Vue.js یک فریمورک جاوا اسکریپت است که برای ایجاد اپلیکیشن های صفحه تک استفاده می شود، به این معنی که این برنامه تنها یک بار از سرور به مرورگر بارگیری می شود و مرورگر نیازی به بارگیری مجدد در هنگام مسیریابی ندارد. در عوض، به سادگی این صفحات را درخواست می کند و آنها بارگذاری می شوند.
در این راهنما، روش انجام مسیریابی با Vue.js را یاد خواهیم گرفت و انواع مختلف مسیریابی را که می توان انجام داد و روش انجام آنها را بررسی می کنیم.
شروع شدن
مسیریابی در Vue.js با انجام می شود روتر Vue، که در پشت سر هم با کتابخانه هسته Vue کار می کند تا به ما امکان می دهد یک سیستم مسیریابی را راه اندازی کنیم. ما می خواهیم استفاده کنیم vue-router در دو سناریو در پروژه ما. ما یا می خواهیم از روتر در یک پروژه موجود استفاده کنیم یا آن را در حین ایجاد یک پروژه جدید اضافه کنیم.
راه اندازی Vue Router در پروژه موجود
یکپارچه سازی 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 آرایه ای که شامل یک شی واحد است، که می تواند چندین شی باشد که در آن هر شی یک مسیر واحد را نشان می دهد. در حال حاضر، ما فقط موردی را ایجاد کردیم که به آن تغییر مسیر دهد homepage جزء.
هرکدام از اینها routes اشیاء به طور معمول از path، که مسیر URL نسبت به سایت است root name، که به عنوان شناسه عمل می کند ، و component، که ما در بالای آن وارد کردیم page.
جدا از آرایه مسیر، نمونه روتر را در پایین با ایجاد یک تنظیم می کنیم createRouter() عملکرد و عبور در history مقادیر کلیدی و routes آرایه، و سپس ما export 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 است که در آن همه page نماها ذخیره خواهد شد. مثلا:
در این مرحله ما اکنون می دانیم که چگونه مسیرها را به صورت دستی تنظیم کنیم.
توجه داشته باشید: همه اینها در صورت استفاده برای ما انجام می شود vue-cli برای نصب vue-router هنگام ایجاد پروژه ما
روتر Vue را با Vue CLI نصب کنید
اگر قرار است پروژه جدیدی ایجاد کنیم و باور داشته باشیم که از آن استفاده خواهیم کرد vue-router، انجام این کار هنگام ایجاد پروژه آسان تر است.
تنها کاری که باید انجام دهیم این است که از Vue CLI برای نصب آخرین نسخه استفاده کنیم vue-router در حالی که به صورت دستی ویژگی ها را انتخاب می کنید process ایجاد پروژه ما:
از طریق راهنمای Vue CLI ما درباره ایجاد پروژه Vue.js بیشتر بخوانید و بیاموزید!
بارگیری مسیرهای تنبل با روتر 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>
یکی از مزایای استفاده از این روش این است که در صورتی که تصمیم به تغییر مسیر مسیر برای برنامه های کاربردی بزرگ خود داشته باشیم، نیازی به تغییر همه مسیرهای پیوند که ممکن است دست و پا گیر باشد، نداریم.
مسیریابی پویا
ممکن است شرایطی ایجاد شود که استفاده از مسیریابی پویا را برای جلوگیری از موارد غیر ضروری ضروری کند page تکرار به عنوان مثال، فرض کنید ما یک لیست از میوه ها داریم و می خواهیم یک کاربر بتواند کلیک کند روی یک میوه خاص و فقط جزئیات مربوط به آن میوه نمایش داده می شود روی یک میوه جزئیات page. در این مورد از مسیریابی پویا استفاده می کنیم.
ما دو صفحه داریم – یکی برای نمایش میوه ها در یک لیست و دیگری برای نشان دادن جزئیات هر میوه، که یک “طرح نقشه” است. page با جزئیات میوه پر شود. ما صفحات را در پوشه 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 page، یک پویا اضافه کردیم id دارایی پس از آن می شود id پارامتر و از آن برای پرس و جو کردن داده های خاصی که نشان می دهد استفاده می کند روی که page استفاده کردن $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 page جایی که ما می توانیم به id پارامتر و از آن برای تشخیص اینکه کدام میوه باید در قسمت نشان داده شود استفاده کنید FruitDetails page.
دسترسی به پارامترهای مسیر
تا اینجا ما دیدیم که چگونه پارامترها را به یک خاص منتقل کنیم page به صورت پویا، اکنون ببینیم چگونه می توانیم به آن پارامتر در خود دسترسی داشته باشیم FruitDetails page. دو راه برای دسترسی به پارامترها در 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 آن را بارگیری می کند page اما بدون هیچ جزء، تولید یک خالی است page. در این حالت بهترین کار نمایش 404 است page شاید با یک دکمه آنها را به سمت homepage یا هر جا که ما معتقدیم دوست دارند بروند.
با ایجاد کامپوننت برای 404 ما به راحتی این کار انجام می شود page و سپس یک مسیر 404 را به آرایه مسیرهای فایل پیکربندی روتر خود اضافه می کنیم، اما این بار از یک عبارت منظم برای گرفتن همه مسیرهایی که قبلاً اعلام نشده اند استفاده می کنیم:
{
path: '/:catchAll(.*)',
name: 'ErrorPage',
component: ErrorPage,
}
این :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 یا -2.
فشار دادن
push() معمولاً پس از انجام یک عمل استفاده می شود و یک ورودی جدید به پشته تاریخ اضافه می کند. به عنوان مثال، اگر کاربری با موفقیت وارد سیستم شود، مایلیم به داشبورد هدایت شویم page به صورت برنامه ای این با گنجاندن روش فشار در کنار نام مسیر انجام می شود:
this.$router.push({ name: 'Dashboard' });
توجه داشته باشید: ما باید مطمئن شویم که مسیر در فایل پیکربندی روتر ما اعلام شده است، در غیر این صورت کار نخواهد کرد و ما را به 404 هدایت می کند. page.
نتیجه
مسیریابی یکی از قابلیت های اصلی Vue است. مگر اینکه در حال ساختن یک برنامه تک صفحه ای (SPA)، می خواهید چندین صفحه را به یک فرود متصل کنید page تا کاربران بتوانند در میان آنها حرکت کنند.
در این راهنما، نگاهی انداخته ایم به اینکه مسیریابی چیست، چگونه می توانید آن را نصب کنید vue-router در پروژه های جدید و موجود، روش انجام بارگذاری تنبل، پیمایش بین مسیرها، انجام مسیریابی پویا، دسترسی به پارامترهای مسیر و انجام ناوبری برنامه ای.
منتشر شده در 1403-01-07 21:40:03
