از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای تغییر مسیرهای Vue Router هنگام توسعه برنامه های تحت وب با Vue.js که دارای صفحات زیادی هستند و دارای ویژگی های زیادی مانند ورود به سیستم، احراز هویت، کارتینگ و همچنین تعداد زیادی برنامه CRUD هستند، در برخی موارد نیاز به پیاده سازی مسیریابی خواهیم داشت. شامل هدایت کاربر از یک نفر است page به دیگری یا …
سرفصلهای مطلب
معرفی
هنگام توسعه برنامه‌های وب با Vue.js که دارای صفحات زیادی هستند و ویژگی‌های زیادی مانند ورود به سیستم، احراز هویت، کارتینگ و همچنین تعداد زیادی برنامه‌های CRUD را در خود جای داده‌اند، باید مسیریابی را در نقطه‌ای پیاده‌سازی کنیم که شامل تغییر مسیر کاربر است. از یکی page به دیگری یا از طریق برنامه ریزی یا زمانی که از طریق URL به مسیری دسترسی پیدا می کنند.
در این مقاله روش های مختلف تغییر مسیر و مسیریابی در Vue.js را با نمونه کدهای کاربردی آشنا خواهیم کرد.
پیش نیاز
مسیریابی در Vue.js با استفاده از آن انجام می شود vue-router بسته، که ما را قادر می سازد تا به راحتی تک اجرا کنیم page مسیریابی در برنامه VUE ما. برای پیاده سازی ریدایرکت های روتر در Vue، ابتدا باید این بسته را در پروژه خود نصب کنیم که با اجرای دستور زیر می توانیم این کار را انجام دهیم. terminal:
$ npm install vue-router@4
تغییر مسیر با Vue
تمام مسیرها در Vue.js در فایل پیکربندی روتر پیکربندی می‌شوند که یک فایل اختصاصی برای همه انواع مسیریابی در Vue است. این فایل معمولا در زیر یافت می شود /src/router/index.js.
برای استفاده از یک مسیر، باید آن را در فایل پیکربندی روتر اعلام کنیم، پس از آن می‌توانیم در قسمت‌های دیگر برنامه به آن ارجاع دهیم. مسیریابی را می توان به روش های مختلفی انجام داد و سناریوهای مختلف ممکن است نیاز به تغییر مسیرهای متفاوتی داشته باشند، اما اجازه دهید قبل از حرکت با ابتدایی ترین نوع تغییر مسیر شروع کنیم. روی به موارد دیگر مانند تغییر مسیرهای برنامه ای، شرطی و خطا.
هنگامی که یک کاربر به /home مسیر، بگویید همیشه باید آنها را به مسیر هدایت کند / مسیر، در نتیجه نشان دادن HomePage. این را می توان از طریق تغییر مسیرها انجام داد:
const routes = (
{
path: '/',
name: 'Home',
component: HomePage,
},
{
path: '/home',
redirect: '/',
}
);
تاکید اصلی این است روی شی دومی که وارد می شود path و redirect گزینه ها، زمانی که کاربر به مجموعه هدایت می شود path به طور خودکار آنها را به مسیر تعیین شده در مسیر هدایت می کند redirect گزینه.
توجه داشته باشید: متوجه خواهیم شد که تغییر مسیر در واقع جایگزین پیوند می شود، یعنی زمانی که ما به آن پیمایش می کنیم /home URL به / بدین ترتیب مجموعه مؤلفه برای / مسیر
در شرایطی که نمی‌خواهیم URL تغییر کند، اما می‌خواهیم کامپوننت مجموعه را نشان دهد / مسیر، سپس می توانیم از یک استفاده کنیم نام مستعار.
نام مستعار
یک alias گزینه ای است که می توانیم اضافه کنیم نام مستعار برای یک مسیر موجود در واقع، ما می‌توانیم چندین مسیر داشته باشیم که با یک مؤلفه خاص کار می‌کنند، نه اینکه به یک مسیر واحد هدایت شوند.
به عنوان مثال، زمانی که ما یک نام مستعار برای /home و مسیر واقعی تنظیم شده است / با یک جزء از HomePage، زمانی که کاربر به آن پیمایش می کند /home را HomePage جزء ظاهر می شود، اما URL باقی می ماند /home:
{
path: '/',
name: 'Home',
component: HomePage,
alias: '/home',
},
توجه داشته باشید: یک alias می تواند آرایه ای از بیش از یک مسیر را طی کند و این مسیرها می توانند شامل پارامترهایی باشند.
{
path: '/',
name: 'Home',
component: HomePage,
alias: ('/home', '/homepage'),
},
اکنون – /، /home و /homepage همه در واقع یکسان را اداره می کنند HomePage جزء!
تغییر مسیر به صورت برنامه ای
همچنین می‌توانیم تغییر مسیرهای برنامه‌ای را انجام دهیم، مانند زمانی که یک دکمه کلیک می‌شود یا یک عمل انجام می‌شود. این مربوط به روتر است push() روش، که می تواند در هر نقطه از برنامه ما استفاده شود. وقتی روی دکمه در مثال زیر کلیک می شود، کاربر را به مسیر مشخص شده می برد:
<template>
<h2>Home Page</h2>
<button @click="$router.push('/about')">Redirect Me</button>
</template>
این را می توان با استفاده از تگ اسکریپت ما نیز انجام داد this کلمه کلیدی:
<template>
<h2>Home Page</h2>
<button @click="redirectMe()">Redirect Me</button>
</template>
<script>
export default {
methods: {
redirectMe() {
this.$router.push('/about');
},
},
};
</script>
توجه به این نکته مهم است که آرگومان می‌تواند یک مسیر رشته‌ای باشد که قبلاً استفاده کردیم یا یک شی توصیفگر مکان که می‌تواند نام، مسیر و غیره را بپذیرد:
// String path
$router.push('/about')
// Descriptor object with path
$router.push({ path: '/about' })
// Named route
$router.push({ name: 'About' })
جایگزین کردن URL فعلی
همانطور که با استفاده از روش‌های برنامه‌نویسی پیمایش می‌کنیم، همانطور که کاربر از طریق کلیک دستی انجام می‌دهد، به تاریخچه مرورگر خود فشار داده و اضافه می‌کنیم. اگر بخواهیم بدون ایجاد یک مدخل تاریخچه جدید فشار بیاوریم – مایلیم جایگزین کردن ورودی:
router.push({ path: '/about', replace: true })
// This is equivalent to
router.replace({ path: '/about' })
تغییر مسیر مشروط
ممکن است بخواهیم زمانی که یک فرمان خاص تکمیل شد، کاربران را تغییر مسیر دهیم، مانند زمانی که می خواهیم یک کاربر را احراز هویت کنیم، خرید محصول را تأیید کنیم، و غیره روی. این معمولاً با استفاده از عبارات شرطی انجام می شود، مانند:
<template>
<h2>Home Page</h2>
<button @click="checkUser()">Authenticate Me</button>
</template>
<script>
export default {
data(){
return{
isLoggedIn: true,
}
},
methods: {
checkUser() {
if(this.isLoggedIn){
this.$router.push('/dashboard');
}else{
this.$router.push('/login');
}
},
},
};
</script>
ما همچنین می توانیم این کار را بدون نیاز به ایجاد متد انجام دهیم:
<template>
<h2>Home Page</h2>
<button @click="{ isLoggedIn ? $router.push('/dashboard') : $router.push('/login'); }">
Authenticate Me
</button>
</template>
<script>
export default {
data() {
return {
isLoggedIn: true,
};
},
};
</script>
هدایت به صفحه 404
در نهایت، مفید خواهد بود که روش رسیدگی به خطاها زمانی که کاربر به مسیر نادرست پیمایش می‌کند، درج شود. هنگامی که کاربر به مسیری می‌رود که در فایل پیکربندی روتر ما اعلام نشده است، یک جزء خالی را نمایش می‌دهد که معمولاً رفتار مورد نظر نیست.
با گرفتن همه مسیرها به جز مسیرهایی که با یک عبارت منظم پیکربندی شده اند و تخصیص آنها به یک جزء خطا به راحتی می توان این کار را انجام داد:
{
path: '/:catchAll(.*)',
name: 'ErrorPage',
component: ErrorPage
}
نتیجه
در این مقاله روش تغییر مسیر در Vue و روش مدیریت ریدایرکت ها به روش های مختلف را یاد گرفتیم.
منتشر شده در 1403-01-08 16:28:06
