Skip to content

Tag: vue router

Vue Router – thêm Route vào Router như thế nào

Như này

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})

hoặc 
router.addRoutes(routes)

3 dạng Record

  • Single view record : có 1 component
  • Multiple view record : nhiều component
  • Redirect record : không có component

Những object mà ta truyền vào trong routes sẽ là [RouteRecord] type

Vue Router – RouterLink & Router-View

<router-link> & <router-view> là 2 thành phần chủ chốt của vue-router.

Router link dùng để render ra link <a> dựa trên những route của ta một cách dynamically.

Còn Router view chính là nơi mà ta render ra component dựa trên sự thay đổi của route

Còn hơn thế nữa cách mà chúng ta xử lý link còn có params, query, hash v.v. được Vue-Router hỗ trợ rất mạnh mẽ sau đây

Vue Router – Navigation Guards

Cần quản lý, xác minh User trước khi cho truy cập vào trang web ?

Navigation Guard hỗ trợ rất mạnh mẽ việc này. Đồng thời cho phép ta thoải mái xử lý rất nhiều các loại tác vụ trước & sau khi thực hiện navigation (chuyển route)


  1. Global
    1. Hoặc sử dụng next 3rd argument
    2. After Hooks
    3. Before Resolve
    4. Per-Route Guard (Global setup)
  2. Local (In-Component Guards)
  3. The Full Navigation Resolution Flow

Vue Router – History mode, Catch all/404, Matching Syntax

History mode là phương thức lưu lịch sử trang web vì VueJs là SPA (single page application) nghĩa là ta không có xử lý html code từ server trả về mà trực tiếp thay đổi trên client luôn

Chính vì thế page của chúng ta sẽ không reload full-page nên là đường dẫn sẽ không thay đổi

Nhưng vue-router cho phép ta làm điều đó với createWebHistory()