Routing with Vue Router

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Route table တည်ဆောက်ရန်
RouterLink နှင့် RouterView သုံးရန်
Dynamic route ကိုနားလည်ရန်

ရိုးရိုးလေး ရှင်းပြမယ်

Vue Router သည် Vue ၏ official client-side routing solution ဖြစ်သည်။ createRouter ဖြင့် URL path နှင့် component ကို map လုပ်ပြီး RouterView တွင် matched component ကို render လုပ်သည်။ RouterLink က full page reload မလုပ်ဘဲ history ကိုပြောင်းပေးသည်။

javascript

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from './views/HomeView.vue'
import CourseView from './views/CourseView.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'home', component: HomeView },
    { path: '/courses/:slug', name: 'course', component: CourseView, props: true }
  ]
})

You should see

/ → HomeView
/courses/vue → CourseView (slug: vue)

လက်တွေ့စမ်းကြည့်ရန်

Home, Courses နှင့် Course Detail routes သုံးခုတည်ဆောက်ပြီး navigation link ထည့်ပါ။

Vue Router — Getting Started — Vue Router

ဒီနေရာမှာ လူအများမှားတတ်တယ်

App တွင် app.use(router) မလုပ်ခြင်း
Route params နှင့် path ကို router.push ထဲတွင် မှားယွင်းပေါင်းသုံးခြင်း

လေ့ကျင့်ခန်း

Home, Courses နှင့် Course Detail routes သုံးခုတည်ဆောက်ပြီး navigation link ထည့်ပါ။

You'll know it worked when: / → HomeView /courses/vue → CourseView (slug: vue)