Tự học Vuejs | Bắt Đầu với Router Vuejs như thế nào?

Chào mừng đến với Cafedev, nơi chia sẻ kiến thức và kinh nghiệm về công nghệ! Trong bài viết này, chúng ta sẽ bắt đầu khám phá về Router Vuejs. Nếu bạn mới bắt đầu với Vue Router hoặc đang muốn làm quen, đừng lo lắng! Chúng tôi sẽ hướng dẫn bạn từ cơ bản đến nâng cao. Với Router Vuejs, bạn có thể tạo ra các ứng dụng web đơn trang mạnh mẽ và linh hoạt. Hãy cùng bắt đầu cuộc hành trình này và khám phá thêm về cách sử dụng Router Vuejs để phát triển ứng dụng của bạn!

Xem một Khóa học Video Vue Router Miễn phí
Vue Router là giải pháp định tuyến phía máy khách chính thức cho Vue.
Định tuyến phía máy khách được sử dụng bởi các ứng dụng một trang (SPAs) để liên kết URL trình duyệt với nội dung được nhìn thấy bởi người dùng. Khi người dùng di chuyển trong ứng dụng, URL được cập nhật tương ứng, nhưng trang không cần phải được tải lại từ máy chủ.

Vue Router được xây dựng trên hệ thống thành phần của Vue. Bạn cấu hình routes để cho Vue Router biết phải hiển thị các thành phần nào cho mỗi đường dẫn URL.

tip Điều kiện tiên quyết Hướng dẫn này sẽ giả định rằng bạn đã quen với Vue. Bạn không cần phải là một chuyên gia Vue, nhưng đôi khi bạn có thể cần tham khảo tài liệu cốt lõi Vue để biết thêm thông tin về một số tính năng cụ thể.

1. Một ví dụ

Để giới thiệu một số ý chính, chúng ta sẽ xem xét ví dụ sau:
– Ví dụ Vue Playground
Hãy bắt đầu bằng cách xem xét thành phần gốc, App.vue.

App.vue

<h1>Hello App!</h1>
  <p>
    <strong>Current route path:</strong> {{ $route.fullPath }}
  </p>
  <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
  </nav>
  <main>
    <RouterView />
  </main>

Template này sử dụng hai thành phần được cung cấp bởi Vue Router, RouterLink và RouterView.
Thay vì sử dụng thẻ thông thường, chúng ta sử dụng thành phần tùy chỉnh RouterLink để tạo liên kết. Điều này cho phép Vue Router thay đổi URL mà không cần tải lại trang, xử lý việc tạo URL, mã hóa và các tính năng khác. Chúng tôi sẽ đi vào chi tiết hơn về RouterLink trong các phần sau của hướng dẫn.

Thành phần RouterView cho biết cho Vue Router nơi để hiển thị thành phần route hiện tại. Đó là thành phần tương ứng với đường dẫn URL hiện tại. Nó không nhất thiết phải ở trong App.vue, bạn có thể đặt nó ở bất kỳ đâu để thích nghi với bố cục của bạn, nhưng nó phải được bao gồm ở một nơi nào đó, nếu không Vue Router sẽ không hiển thị bất cứ điều gì.

Ví dụ trên cũng sử dụng {{ $route.fullPath }}. Bạn có thể sử dụng $route trong các mẫu thành phần của bạn để truy cập vào một đối tượng biểu diễn cho route hiện tại.

Tạo ra một thể hiện router

Thể hiện router được tạo bằng cách gọi hàm createRouter():

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

import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView },
]

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

Tùy chọn routes xác định các route chính xác, ánh xạ đường dẫn URL với các thành phần. Thành phần được chỉ định bởi tùy chọn component chính là thành phần sẽ được hiển thị bởi trong App.vue của chúng ta ở trước đó. Các thành phần route này đôi khi được gọi là views, mặc dù chúng chỉ là các thành phần Vue thông thường.
Routes hỗ trợ các tùy chọn khác nhau mà chúng ta sẽ thấy sau trong hướng dẫn, nhưng hiện tại chúng ta chỉ cần path và component.

Tùy chọn history điều khiển cách các route được ánh xạ vào URL và ngược lại. Đối với ví dụ Playground chúng tôi đang sử dụng createMemoryHistory(), mà bỏ qua hoàn toàn URL của trình duyệt và sử dụng URL nội bộ của chính nó thay vào đó. Điều này hoạt động tốt cho Playground, nhưng không có khả năng là những gì bạn muốn trong một ứng dụng thực sự. Thông thường, bạn muốn sử dụng createWebHistory() thay vào đó, hoặc có thể createWebHashHistory(). Chúng tôi sẽ bàn về chủ đề đó chi tiết hơn trong hướng dẫn về Chế độ lịch sử.

Đăng ký plugin router

Khi chúng ta đã tạo thể hiện router của chúng ta, chúng ta cần đăng ký nó như một plugin bằng cách gọi use() trên ứng dụng của chúng ta:

createApp(App)
  .use(router)
  .mount('#app')

Hoặc, tương đương:

const app = createApp(App)
app.use(router)
app.mount('#app')

Tương tự như hầu hết các plugin Vue, việc gọi use() cần phải xảy ra trước khi gọi mount().
Nếu bạn muốn biết về những gì plugin này làm, một số trách nhiệm của nó bao gồm:

1. Đăng ký toàn cầu các thành phần RouterView và RouterLink. 2. Thêm các thuộc tính toàn cầu $router và $route. 3. Kích hoạt các hợp thành useRouter() và useRoute(). 4. Kích hoạt router để giải quyết route ban đầu.

Truy cập router và route hiện tại

Bạn có khả năng muốn truy cập router từ nơi khác trong ứng dụng của bạn.
Nếu bạn xuất thể hiện router từ một mô-đun ES, bạn có thể nhập thẳng thể hiện router tại nơi bạn cần nó. Trong một số trường hợp, đây là phương pháp tốt nhất, nhưng chúng ta có các lựa chọn khác nếu chúng ta ở trong một thành phần.

Trong mẫu thành phần, thể hiện router được tiết lộ dưới dạng $router. Điều này tương tự như thuộc tính $route chúng ta đã thấy trước đó, nhưng lưu ý r phụ bổ vào cuối.

Nếu chúng ta sử dụng API Options, chúng ta có thể truy cập hai thuộc tính này như là this.$router và this.$route trong mã JavaScript của chúng ta. Thành phần HomeView.vue trong ví dụ Playground truy cập router theo cách đó:

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    },
  },
}

Phương thức này đang gọi push(), được sử dụng cho điều hướng theo chương trình. Chúng ta sẽ tìm hiểu thêm về điều đó sau.
Với API Composition, chúng ta không có quyền truy cập vào thể hiện thành phần thông qua this, vì vậy Vue Router bao gồm một số hợp thành mà chúng ta có thể sử dụng thay vào đó. Thành phần AboutView.vue trong ví dụ Playground đang sử dụng cách tiếp cận đó:

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const search = computed({
  get() {
    return route.query.search ?? ''
  },
  set(search) {
    router.replace({ query: { search } })
  }
})
</script>

Hiện tại không cần thiết phải hiểu tất cả mã nguồn đó ngay bây giờ. Điều quan trọng cần lưu ý là các hợp thành useRouter() và useRoute() được sử dụng để truy cập vào thể hiện router và route hiện tại tương ứng.

Bước tiếp theo

Nếu bạn muốn xem một ví dụ hoàn chỉnh sử dụng Vite, bạn có thể sử dụng công cụ tạo cấu trúc create-vue, có tùy chọn để bao gồm Vue Router trong dự án ví dụ của nó:
code-group

[npm]
npm create vue@latest

[yarn]
yarn create vue

[pnpm]
pnpm create vue

Dự án ví dụ được tạo bởi create-vue sử dụng các tính năng tương tự như những gì chúng ta đã thấy ở đây. Bạn có thể thấy đó là một điểm bắt đầu hữu ích để khám phá các tính năng được giới thiệu trong vài trang tiếp theo của hướng dẫn này.

2. Quy ước trong hướng dẫn này

Các thành phần Đơn Tệp

Vue Router thường được sử dụng nhất trong các ứng dụng được xây dựng bằng cách sử dụng công cụ gói (ví dụ: Vite) và SFCs (tức là tệp .vue). Hầu hết các ví dụ trong hướng dẫn này sẽ được viết trong phong cách đó, nhưng Vue Router chính nó không yêu cầu bạn phải sử dụng các công cụ xây dựng hoặc SFCs.
Ví dụ, nếu bạn đang sử dụng các bản toàn cầu của Vue và Vue Router, thì các thư viện sẽ được tiết lộ thông qua các đối tượng toàn cầu, thay vì nhập:

const { createApp } = Vue
const { createRouter, createWebHistory } = VueRouter

Phong cách API của thành phần

Nếu bạn cần làm mới về hai phong cách, hãy xem Vue – Các Phong cách API.

router và route

Trong hướng dẫn này, chúng tôi thường sẽ tham chiếu đến thể hiện router như router. Đây là đối tượng được trả về bởi createRouter(). Cách bạn truy cập đối tượng đó trong ứng dụng của bạn sẽ phụ thuộc vào ngữ cảnh. Ví dụ, trong một thành phần sử dụng API Composition, nó có thể được truy cập bằng cách gọi useRouter(). Với API Options, nó có thể được truy cập bằng cách sử dụng this.$router.
Tương tự, route hiện tại sẽ được gọi là route. Nó có thể được truy cập trong các thành phần bằng cách sử dụng useRoute() hoặc this.$route, tùy thuộc vào API nào mà thành phần đó đang sử dụng.

RouterView và RouterLink

Cả hai thành phần RouterView và RouterLink đều được đăng ký toàn cầu, vì vậy bạn không cần phải nhập chúng trước khi sử dụng trong các mẫu thành phần. Tuy nhiên, nếu bạn muốn, bạn có thể nhập chúng cục bộ, ví dụ import { RouterLink } from 'vue-router'.
Trong các mẫu, tên thành phần có thể được viết ở cả hai dạng PascalCase hoặc kebab-case. Trình biên dịch mẫu của Vue hỗ trợ cả hai định dạng, vì vậy và thường tương đương. Bạn nên tuân theo bất kỳ quy ước nào được sử dụng trong dự án của bạn.

Cảm ơn bạn đã đọc bài viết của chúng tôi trên Cafedev về Router Vuejs và Bắt đầu. Hy vọng rằng thông tin mà chúng tôi chia sẻ đã giúp bạn có cái nhìn tổng quan về cách sử dụng Vue Router trong dự án của mình. Khởi đầu là bước quan trọng đối với mọi dự án, và việc làm quen với Router Vuejs sẽ giúp bạn xây dựng các ứng dụng web mạnh mẽ và linh hoạt. Đừng ngần ngại thử nghiệm và áp dụng những gì bạn đã học vào thực tế. Hãy tiếp tục theo dõi Cafedev để cập nhật thêm kiến thức và kinh nghiệm mới!

Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao

Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:

• Group Facebook
• Fanpage
• Youtube
• Instagram
• Twitter
• Linkedin
• Pinterest
• Reddit
• Tumblr
• Trang chủ

Chào thân ái và quyết thắng!