Vue router

យើងសិក្សាអំពី router នៃ vue ជាធម្មតា vue វាជា sigle page ប៉ុន្តែនៅវែបសាយមួយត្រូវការមានច្រើន page ដូចនេះយើងសិក្សាអំពី router

នៅពេលយើងបង្កើត project ដំបូង Add Vue Router for Single Page Application development? សូមជ្រើសរើសយក yes ដើម្បីងាយស្រួល configer router

Router configuration

បន្ទាប់ពីយើងបង្កើត project រួច

custom router

យើងលុបរបស់វាខ្លះសម្រាប់សិក្សាងាយស្រួល

យើងបង្កើត property routes array មួយ

import { createRouter, createWebHistory } from 'vue-router'

const routes = []

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

---

Create routes

នៅក្នុង property routes array យើងបង្កើត object មានដូចជា path និង componest

• path: "profile" // www.exaple.com/profile
• component: Profile //យកពីឈ្មោះ property

ចំពោះ component យើងត្រូវបង្កើត property ដើម្បីដែលទាញ file ពី folder views

ប៉ុន្តែមុនដំបូងបង្កើត Home មួយសិន

File App.vue

<template>
  <router-view></router-view> 
</template>

ឬក៏បែបនេះក៏វាដំណើរការដែរ

<template>
  <RouterView/>
</template>

---

router link

យើងមានពីរ Page គឺ Home និង Profile

នៅក្នុង File App.vue ដើម្បីចុង link ទៅ page បាន យើងត្រូវប្រើ

<router-link to="/profile">Profile</router-link>

---

Custom Link

យើងប្រើ router-link ជាមួយ ul list

---

router name

const routes = [
  {
    path: '/',
    component: Home,
    name: 'home'
  },
  { 
    path: '/profile',
    component: Profile,
    name: 'profile'
  }
]

redirect router

នៅពេលយើងប្រើ link ឬ permaling ដោយទម្រង់បែបនេះ profile-name។ នៅពេល user សរសេរតែ profile នោះវានឹង ចេញជា blank page ដូចនេះប្រើ redirect ដោយចាប់យក name នៃ path profile-name

const routes = [
  {
    path: '/',
    component: Home,
    name: 'home'
  },
  { 
    path: '/profile-name',
    component: Profile,
    name: 'profile'
  },
  {
    path: '/profile',
    redirect: {name: 'profile'}
  }

]

ការបិទការខុស permalink

path: '/:catchAll(.*)*'

នេះគឺជាការពារនៅពេល User បញ្ចូល permalink ដោយគ្មាន link នៅក្នុងវែបសាយរបស់យើងនោះវាចេញ blank។ ផ្ទុយទៅយើងត្រូវឲ្យវាលូតទៅ home page វិញ

{
    path: '/:catchAll(.*)*',
    redirect: {name: 'home'}
  }

---

ភាពខុសគ្នា alias និង redirect

នេះបើយោងតាម gemini

• Use aliases when you want to provide multiple ways to access the same component while keeping the URL in the address bar user-friendly.
• Use redirects when you want to permanently change the destination of a URL or prevent users from accessing a specific route altogether.

alias និង redirect

---

Post ដោយ id

យើងបង្កើត page ពីរគឺ ១ posts និង ២ postdetail ។ ដោយនៅក្នុង page posts ដោយមាន ul li ច្រើនវាដូចទៅនឹង contents

បង្កើត file Posts.vue

យើងបង្កើត path និង component ដូចចំណុចខាងលើដែរ

បង្កើត postdetail សម្រាប់បង្ហាញទិន្ន័យ

បង្កើត file PostDetail.vue រួចហើយបង្កើត path និង componen

import PostDetail from '@/views/PostDetail.vue'
const routes = [
 
  {
    path: '/posts',
    component: Posts,
    name: 'post'
  },
  {
    path: '/postdetail/:id',
    component: PostDetail,
    name: 'detail'
  }

]

នៅក្នុង file posts.vue

នៅក្នុងយើងបង្កើត ul li ដោយមាន id នីមួយៗ

<template>
    <h1>Page posts</h1>
    <ul>
        <li>
            <router-link to="/postdetail/id1"> Post 1</router-link>
        </li>
        <li>
            <router-link to="/postdetail/id2"> Post 3</router-link>
        </li>
        <li>
            <router-link to="/postdetail/id3"> Post 3</router-link>
        </li>
        <li>
            <router-link to="/postdetail/id4"> Post 4</router-link>
        </li>
    </ul>
</template>

$route

ដើម្បីចាប់យក id ពី params បាននៅក្នុង page postdetail.vue នោះយើងត្រូវប្រើ

$route.params.id

useRoute

useRoute គឺជាឧបករណ៍មួយដែលផ្ដល់ដោយ Vue Router ដើម្បីអនុញ្ញាតអ្នកប្រើប្រាស់ Vue 3 Composition API អាចចូលដំណើរការទិន្នន័យដែលទាក់ទងនឹងផ្លូវ (route) បច្ចុប្បន្ន។ វាផ្ដល់នូវវិធីសាស្ត្រដែលងាយស្រួលដើម្បីទទួលយកទិន្នន័យដែលបានបញ្ជូនតាម URL, path, query parameters, និង metadata ផ្សេងៗនៃផ្លូវ

useRouter

វាអាចប្រើដើម្បីធ្វើចលនាដោយ dynamically ទៅផ្លូវផ្សេងៗ, push ទៅផ្លូវថ្មី, replace ផ្លូវបច្ចុប្បន្ន, ឬដំណើរការដំណើរការផ្លូវផ្សេងៗ។

<template>
    <h1>Page post detail</h1>
    <p><b>This post with by ID {{ $route.params.id }}</b></p>

    <button @click="showId">Click Show ID </button>

    <button @click="toFirstPost">Go to first post</button>
    <p><RouterLink to="/posts">< BACK</RouterLink> </p>
 
</template>
<script setup>
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()

const showId = ()=>{
    alert(`The ID is ${route.params.id}`)
}
const toFirstPost = ()=>{
    router.push({
        name: 'detail',
        params:{
            id: 'id1'
        }
    })
}
</script>

---

Posts ជាមួយ Array

<template>
    <h1>Page posts</h1>
    <ul>
        <li v-for="posts in postsData">
            <router-link :to="`/postdetail/${posts.id}`"> {{ posts.title }}</router-link>
        </li>
        
    </ul>
</template>

<script setup>
    import {ref} from 'vue'

    const postsData = ref([
        {
            id: 'id1',
            title: "Cambodia"
        },
        {
            id: 'id2',
            title: "Thailand"
        },
        {
            id: 'id3',
            title: "Vietnam"
        },
        
    ])

</script>

github