ساخت یک SPA ساده با Vue CLI

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

مرحله بعد باید vue-router رو وارد و به برنامه شناسایی کنیم و روت‌هامون رو بسازیم. کد زیر رو جایگزین کدهای فایل main.js کنین تا به توضیحاتش بپردازیم:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    component: require('./components/Home.vue').default
  },
  {
    path: '/users',
    component: require('./components/Users.vue').default
  }
];

const router = new VueRouter({
  mode: 'history',
  routes: routes
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})

1. خط ۳ پلاگین روتر رو اضافه و توی خط ۵ اون رو به ویوو شناسایی کردیم.
2. توی خط ۷ یک متغیر ساختیم به اسم routes که توی اون مسیرهای برنامه‌مون رو مشخص می‌کنیم. این متغیر باید آرایه‌ای از آبجکت‌ها باشه. هر آبجکت یک مسیر هست. هر مسیری یک path داره و یک component. وقتی توی مرورگر مسیر path باز شد، کامپوننت مربوط به اون هم باز میشه (هنوز کامپوننت‌ها رو نساختیم).
3. توی خط ۱۸ یک آبجکت از کلاس VueRouter ساختیم. به این کلاس یک آبجکت پاس دادیم که شامل مسیرهایی هست که مرحله قبل ساختیم و همچنین نوع مسیریابی. در حالت پیشفرض مسیریابی توی آدرس‌بار با # انجام میشه. اگه با # نمی‌خوایم mode رو برابر history قرار می‌دیم.
4. توی خط ۲۷ آبجکتی که از کلاس VueRouter ساختیم رو به نمونه (Vue Instance) پاس می‌دیم.

۴. ساختن کامپوننت‌ها

ما برای دو تا مسیر دو تا کامپوننت مشخص کردیم. باید اول اونها رو توی مسیر src/components بسازیم:

ابتدا فایل Home.vue رو با محتویات زیر می‌سازیم:

<template>
    <p>
        This is 🏠
    </p>
</template>

و بعد فایل Users.vue:

<template>
    <p>
        Welcome darling 💚!
    </p>
</template>

۵. اضافه کردن تگ <router-view />

این تگ توسط پکیج روتر به برنامه اضافه شده و مسئول نمایش محتویات کامپوننت‌هایی هست که ساختیم. محتویات فایل src/App.vue رو پاک و کدهای زیر رو بهش اضافه می‌کنیم:

<template>
  <div>
    <nav>
      <router-link to="/">Home </router-link>
      <router-link to="/users">Users</router-link>
    </nav>
    <router-view />
  </div>
</template>

router-view رو توی خط ۷ می‌بینید. یک تگ دیگه وجود داره به اسم router-link توی خط‌های ۴ و ۵. وقتی می‌خوایم یک لینک برای رفتن به یک صفحه دیگه بسازیم از این تگ استفاده می‌کنیم. اینطوری باعث میشه صفحه refresh نشه. این تگ یک attribute می‌گیره به اسم to که توی اون باید مقدار path ـی رو بنویسیم که توی تعریف مسیرها نوشتیم.

۶. ساخت فایل vue.config.js

خب این مرحله آخر هست. یک فایل به اسم vue.config.js رو توی مسیر اصلی برنامه می‌سازیم با محتویات زیر:

module.exports = {
    runtimeCompiler: true
}

این فایل شامل تنظیمات برنامه هست که اگه وجود نداشت تنظیمات پیشفرض در نظر گرفته میشه.

اجرا کردن برنامه

حالا توی خط فرمان دستور npm run serve رو می‌زنیم تا برنامه‌مون رو ببینیم. اگه چنین چیزی می‌بینید، تبریک! شما اولین SPA رو ساختید 👌💪

سورس کامل پروژه از گیت‌هاب