جلسه ۹ – معرفی کتابخونه Vue Router در ویو جی اس

یکی از ویژگی های خوب جاوا اسکریپت اینه که میتونه محتواهای متفاوتی رو که وابسته به یک url رو هستند رو به برای صفحه هات سایتمون بیاره  در گذشته مرور کردن (browse)یک url که برای نمایش فقط یک اچ تی ام ال خام برا نمایش متن بود . ولی با اومدن جاوا اسکریپت  یک url اشاره داره به یک فایل پایه (کد سمت سرور یا داده json و غیره) که با توجه به درخواست مقداری که میخوایم رو برامون آماده میکنه و برمیگردونه  با ویو جی اس هم چنین مکانیزم رو با کتابخونه VueRouter فراهم میکنه که امکان تغییر محتوا یک سایت تک صفحه ای رو به ما میده

<script src=”https://unpkg.com/vue-router@2.0.1″/>
برای نصب کتابخونه می تونیم از کد بالا استفاده کنیم
import Vue from ‘vue’
import VueRouter from ‘vue-router’

Vue.use(VueRouter)

و برای اینکه در ویو جی اس ازش بتونیم استفاده کنیم باید مانند کد بالا عمل کنیم

خب حالا برا اینکه در شی امون بتونیم ازش استفاده کنیم ابتدا یک نمونه ازش می سازیم و سپس تو شی ویو جی اس ازش استفاده میکنیم
var router = new VueRouter({
routes: []
})

var app = new Vue({
router
}).$mount(‘#app’)

خب برای اینکه مثال عملی بخوایم داشته باشیم و ببینیم نحوه عملکرد روتر به چه ترتیب هست کد زیر رو در نظر بگیرید

var router = new VueRouter({
routes: [
{ path: ‘/’, component: require(‘./components/home.vue’) },
{ path: ‘/about’, component: require(‘./components/about.vue’) },
{ path: ‘/contact’, component: require(‘./components/contact.vue’) },
]
}

خب برا اینکه از این component هامون استفاده کنیم باید بیایم کد زیر رو تو اچ تی ام ال مون قرار بدیم
<router-view></router-view>
فقط قبل این کد باید لینک های تک تک کامپوننت هامون هم رو به ترتیب بنویسیم به صورت زیر
<router-link to=”/”>Home</router-link>
<router-link to=”/about”>About</router-link>
<router-link to=”/contact”>Contact</router-link>

<html lang=”en”>
<head>
<meta charset=’UTF-8′>
<meta name=”robots” content=”noindex”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>
<link href=”../assets/css/styles.css” rel=”stylesheet”>
کد ما به صورت کلی به شکل زیر میشه
</head>
<body>
<div id=”app”>
<h1>Router Example</h1>
<p>
<router-link to=”/”>Home</router-link>
<router-link to=”/about”>About</router-link>
<router-link to=”/contact”>Contact</router-link>
</p>
<router-view></router-view>
</div>

<script src=’https://unpkg.com/vue@next/dist/vue.js’></script>
<script src=’https://unpkg.com/vue-router@next’></script>
<script src=”js/app.js”></script>
</body>
</html>

فقط یه نکته ای رو بگم برای مسیر rout مون اگه تغییر کرد برا اینکه نیایم کل کد رو هر دفه تغییر بدیم میتونیم یه متغیر به اسم rout تعریف کنیم  و هردفه لازم شد این متغیر رو در کدمون جای بدیم
component: Contact
}
];
const Home = { template: ‘<div class=”container”><h1>Home</h1></div>’ };
const About = { template: ‘<div class=”container”><h1>About</h1></div>’ };
const Contact = { template: ‘<div class=”container”><h1>Contact</h1></div>’ };

const routes = [
{
path: ‘/’,
component: Home
},
{
path: ‘/about’,
component: About
},
{
path: ‘/contact’,
component: Contact
}
];
const router = new VueRouter({ routes: routes });
const app = new Vue({ router }).$mount(‘#app’);

همچنین برای لینک هم می تونیم کدمون با نام کامپوننت به جای لینک ادرس بدیم
<router-link :to=”{ name: ‘about’ }”>About</router-link>

با ما همراه باشید
موفق باشید

local_offerevent_note خرداد ۷, ۱۳۹۷

account_box ali kaviani


local_offer

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *