از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
Vue-Router: پیمایش Vue.js AppsVue-Router یک بسته جاوا اسکریپت است که به شما امکان می دهد مسیریابی را برای برنامه های کاربردی یک صفحه (SPA) تنظیم کنید. SPA به یک برنامه وب اطلاق می شود که فقط یک index.html را ارائه می دهد page و محتوا را به صورت پویا ارائه می دهد، به این ترتیب چارچوب های جاوا اسکریپت مدرن مانند React.js یا Vue.js هستند…
سرفصلهای مطلب
معرفی
Vue-Router یک بسته جاوا اسکریپت است که به شما امکان می دهد مسیریابی را برای برنامه های کاربردی یک صفحه (SPA) تنظیم کنید.
SPA به یک برنامه وب اطلاق می شود که فقط یک برنامه را ارائه می دهد index.html page و محتوا را به صورت پویا ارائه می دهد، به همین ترتیب چارچوب های جاوا اسکریپت مدرن مانند React.js یا Vue.js به احتمال زیاد راه اندازی شده اند.
چرا از Vue-Router استفاده کنیم؟
استفاده از SPA مزایای زیادی دارد، اما یکی از احتیاط های اصلی این است که تمام اجزای وب page از طریق جاوا اسکریپت تحویل، اضافه یا حذف می شوند بدون اینکه صفحات HTML اضافی از سرور واکشی شوند. این همان چیزی است که SPA در مورد آن است، اما مسئله اصلی این است که می توانید در “صفحات” حرکت کنید همانطور که کاربران در اکثر وب سایت ها به آن عادت دارند.
اینجاست که Vue-Router لگد وارد می کند!
نصب و راه اندازی
اگر از Vue CLI استفاده می‌کنید، ممکن است قبلاً با موقعیتی مواجه شده باشید که در آن از شما خواسته شود که آیا می‌خواهید Vue-Router را در پیکربندی پروژه قرار دهید.
Vue-Router می تواند به راحتی با استفاده از مدیر بسته دلخواه شما نصب شود NPM یا نخ:
$ npm install vue-router
OR
$ yarn add vue-router
این اضافه خواهد شد vue-router به شما package.json فایل و شما خوب هستید که بروید.
توصیه می شود کدهای مربوط به روتر را در یک فایل جداگانه به نام بنویسید router.js و آن را به برنامه Vue در داخل اضافه کنید main.js فایل:
import Vue from 'vue'
import App from './App'
import Router from './router // Router being imported
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router: Router, // Router added to the Vue instance
components: { App },
template: '<App/>'
})
فایل router.js: ایجاد مسیرها
ابتدا ما نیاز داریم import router از بسته Vue-Router، و با روش به عنوان افزونه به Vue اضافه کنید use.
پس از آن، روتر را به عنوان یک شی در نظر می گیریم که تمام مسیرها را نگه می دارد. و البته ما مجبوریم export تا بقیه برنامه ها بتوانند به آن دسترسی داشته باشند.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: ()
})
این routes ویژگی آرایه ای است که اشیایی را نگه می دارد که هر کدام مسیرهای خاصی برای وب شما خواهند بود page. ابتدایی ترین آنها به شکل زیر است:
const Home = { template: '<div>Welcome to رسانگار!</div>' }
routes: (
{
path: '/',
name: 'Home',
component: Home
}
)
Vue-Router ویژگی های فراوانی را می پذیرد زیرا اشیاء مسیریابی شده است:
-
path: این مسیر نسبی به مسیر اصلی برنامه وب شما است که در آن می خواهید یک مؤلفه خاص ارائه شود روی. -
name: ویژگی name هنگام ارجاع به این شی خاص در داخل اجزای Vue مفید خواهد بود. -
component: با این ویژگی، یک جزء Vue به مسیر مسیری که اختصاص داده اید تزریق می شود. -
redirect: یک مسیر کامپوننت زمانی که مطابقت پیدا کرد می تواند به مسیر دیگری هدایت شود. -
alias: تقریباً شبیه تغییر مسیر است، اما هر زمان که مسیر نام مستعار را وارد کنید، روتر روتر را نشان می دهد. root مسیر.
const router = new VueRouter({
routes: (
{
path: '/users',
component: Users,
alias: '/alias' // When entering '/alias' the content of the component Users will render
}
)
})
children: این آرایه ای با مسیرهای بیشتر است که در حالی که مسیر والد را در URL حفظ می کند به مسیر متصل می شود.
const router = new VueRouter({
routes: (
{
path: '/users/',
component: Users,
children: (
{
// when /users/profile gets matched
path: 'profile',
component: UserProfile
},
{
// when /users/info gets matched
path: 'info',
component: UserInfo
}
)
}
)
})
-
params: اینها ویژگی ها یا اطلاعات خاصی هستند که می توانند به کامپوننت منتقل شوند. -
meta: هر زمان که یک مسیر (یا چندین مسیر) با مسیر مطابقت داده شود، ویژگی متا در دسترس خواهد بود. این به ویژه هنگام استفاده از محافظ های ناوبری مفید است.
ما همچنین می توانیم یک را اضافه کنیم mode دارایی به Router هدف – شی. به طور پیش فرض، Vue-Router تنظیم شده است hash حالت، به این معنی که همه URL ها دارای یک هستند # در پایان. این را می توان همانطور که به احتمال زیاد می خواهید با تنظیم کردن حذف کرد mode دارایی به history:
export default new Router({
mode: 'history',
routes: ()
})
این حالت با یک مشکل همراه است. بدون پیکربندی مناسب، برای مثال، دسترسی به http://localhost:8080/user/id، مستقیماً در مرورگر آنها منجر به یک می شود 404 خطا
برای رفع این مشکل، باید یک مسیر بازگشتی ساده به سرور خود اضافه کنید. اگر مسیر با هیچ دارایی ثابت مطابقت نداشته باشد، باید به همان صورت عمل کند index.html.
به عنوان مثال، اگر می خواهید حالت تاریخچه را در سرور Node.js تنظیم کنید، می توانید این حالت را تنظیم کنید:
const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
})
res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening روی: http://localhost:%s', httpPort)
})
دسترسی به روتر از کامپوننت
با توجه به یک مؤلفه خاص، می توانید با استفاده از آن به شی روتر دسترسی پیدا کنید $ علامت گذاری به منظور واکنش به ورودی کاربر یا توانایی ارائه مسیرها بسته به آن روی یک شرط خاص
برای اینکه مسیرهای Vue-Router ارائه شوند، باید از مسیر عبور کنید <router-view> برچسب داخل یک جزء Vue.
همچنین می توانید از طریق یک به مسیرها دسترسی داشته باشید <a> تگ کنید، اما این باعث ایجاد یک می شود page برای جلوگیری از این رفتار می توانید از آن استفاده کنید router-link با to دارایی به جای الف href. این تگ ویژه به روتر می گوید که به مسیر داده شده “page”.
<template>
<div>
<h3> Vue Router - رسانگار </h3>
<h4> { $router.params.id } </h4>
<button @click="goBack"> Go Back </button>
<router-view></router-view>
<router-link :to="/users"> Users Route </router-link>
</div>
</template>
export default {
methods: {
goBack () {
this.$router.go(-1)
}
}
}
شی روتر دارای روش های خاصی است که به شما کمک می کند برنامه خود را به URL مورد نظر هدایت کنید:
-
$router.go(): عددی را به عنوان پارامتر می گیرد که به تعداد موقعیت هایی که می خواهید در آرایه پشته تاریخچه مرورگر به جلو یا عقب بروید اشاره می کند. -
$router.push(): این تابع می تواند یک رشته با اشاره به نام یا مسیر مسیری که می خواهید به آن دسترسی داشته باشید، یا یک شی با پیکربندی مسیر را بگیرد.
router.push(
{
name: 'users'
params: { id: 1 }
}
)
$router.replace(): تقریباً مانند فشار، به جای اضافه کردن یک ورودی جدید به پشته تاریخچه مرورگر، ورودی فعلی را با چیزی که ما اضافه می کنیم جایگزین می کند.
نگهبانان مسیر
اکثر برنامه ها به روشی برای ممنوع کردن دسترسی به مسیرهای خاص نیاز دارند. این را می توان به راحتی با محافظ های مسیر انجام داد، که قبلاً در مورد آن صحبت کردیم meta ویژگی.
هر مسیر دارای یک جریان وضوح ناوبری است و قلاب‌های خاصی وجود دارد که می‌توان از آنها به نفع شما استفاده کرد.
beforeEach: مطمئناً مفیدترین مورد در هنگام نیاز به یک گارد جهانی برای دور نگه داشتن کاربران از مناطق محدود، می توانید یک عملکرد پاسخ به تماس را تنظیم کنید که دریافت خواهد کرد.to،from،nextازbeforeEachعملکردی که به شما امکان می دهد بدانید از کجا و به کجا حرکت می کنید و همچنین مرحله بعدی را که باید بردارید:
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.auth)) {
if (!userIsLoggedIn)
next('/')
console.log('Not allowed here')
} else {
next('/secret-endpoint')
}
}
})
-
beforeEnter: قبل از ورود کاربر به مسیر خاصی فعال می شود. -
afterEach: هر زمان که ناوبری برای هر مسیر موفقیت آمیز باشد، این مورد فراخوانی می شود.
نتیجه
Vue-Router ابزاری است که برای ساختن برنامه های Vue.js Single Page استفاده می شود، به شما این امکان را می دهد که ناوبری کاربر را به طور کامل مدیریت کنید.
شما همیشه می توانید اطلاعات بیشتری را با مراجعه به سایت دریافت کنید رسمی Vue-Router page.
منتشر شده در 1403-01-26 09:10:03
