Trong Vue 3, vue-router là thư viện chính thức dùng để quản lý routing (điều hướng giữa các trang) trong ứng dụng Vue.js. Với sự phát triển của Vue 3, vue-router cũng được nâng cấp lên phiên bản 4, cung cấp các tính năng mới và tối ưu hóa hơn so với các phiên bản trước.

1. Cài đặt Vue Router:

Đầu tiên, bạn cần cài đặt vue-router bằng cách sử dụng npm hoặc yarn.

npm install vue-router@4

2. Cấu hình Vue Router:

Bạn cần tạo một tệp cấu hình router, ví dụ router.js, nơi định nghĩa các routes (đường dẫn) của ứng dụng.

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

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

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

3. Tích hợp Router vào Vue Application:

Trong file main.js, tích hợp router vào ứng dụng Vue.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // Import router

const app = createApp(App);

app.use(router); // Sử dụng router

app.mount('#app');

4. Sử dụng Router trong Component:

Để điều hướng giữa các trang, bạn sử dụng <router-link> và <router-view>.

• <router-link>: Dùng để tạo liên kết điều hướng giữa các trang.
• <router-view>: Nơi để hiển thị component tương ứng với đường dẫn.

Ví dụ trong App.vue:

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

5. Navigation Guards (Bảo vệ điều hướng):

Bạn có thể sử dụng beforeEach hoặc beforeResolve để kiểm tra quyền truy cập trước khi chuyển trang.

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' });
  } else {
    next();
  }
});

6. Dynamic Routes:

Bạn có thể sử dụng route động với :id trong đường dẫn.

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User,
  },
];

Trong component User.vue, bạn có thể truy cập id thông qua this.$route.params.id.

Các khái niệm nâng cao

• Named Views: Cho phép bạn hiển thị nhiều router view trong cùng một trang.

const routes = [
  {
    path: '/dashboard',
    components: {
      default: Dashboard,
      sidebar: Sidebar,
    },
  },
];

• Nested Routes: Định nghĩa các route con để tạo cấu trúc điều hướng phức tạp.

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile,
      },
      {
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
];

Tổng kết

Vue Router 4 trong Vue 3 cung cấp cách quản lý routing mạnh mẽ, linh hoạt và tối ưu hóa hơn với các tính năng như lazy loading, dynamic routes, và nested routes. Bạn có thể dễ dàng tích hợp và mở rộng cho các ứng dụng SPA (Single Page Application) của mình.

Nếu bạn có bất kỳ câu hỏi nào liên quan đến Vue Router hoặc cần ví dụ cụ thể hơn, mình sẵn sàng giúp!