VueJS: Bắt đầu với Router

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Lưu ý phiên bản

Đối với TypeScript, vue-router@3.0+ yêu cầu vue@2.5+ và ngược lại.

Vue Router là router chính thức của Vue.js. Nó được tích hợp sâu vào Vue.js core để xây dựng các trang SPA (Single Page Applications) với Vue.js một cách dễ dàng.

Các tính năng của Vue Router bao gồm:

  • Mapping route/view lồng nhau
  • Cấu hình router cho component, module
  • Route cho các param, query và wildcard
  • Tạo hiệu ứng transition View được cung cấp bởi hệ thống transition của Vue.js
  • Kiểm soát điều hướng cực kỳ mượt
  • Liên kết với các lớp CSS hoạt động tự động
  • Chế độ HTML5 history hoặc hash với tính năng tự động dự phòng trong IE9
  • Tùy chỉnh hành vi thanh cuộn

Lưu ý

Ta sẽ sử dụng ES2015 trong các ví dụ của các bài viết tại V1Study.

Ngoài ra, tất cả các ví dụ sẽ sử dụng phiên bản Vue đầy đủ để tăng tốc độ biên dịch template.

Việc tạo một Single-page Application bằng Vue + Vue Router sẽ rất đơn giản. Khi thêm Vue Router vào mix thì đơn giản ta chỉ cần map các component tới các route và Vue Router biết nơi render. Dưới đây là ví dụ cơ bản:

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>

JavaScript

// 0. Nếu dùng module system (ví dụ qua vue-cli): import Vue và VueRouter
// sau đó đó gọi `Vue.use(VueRouter)`.

// 1. Tạo các route component.
// Có thể được import từ các file khác
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. Tạo các route
// Mỗi route map một component.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. Tạo đối tượng router và truyền tùy chọn `routes` ở trên
// Ta có thể truyền nhiều tùy chọn.
const router = new VueRouter({
  routes // short for `routes: routes`
})

// 4. Tạo và mount đối tượng root.
// Hãy đảm bảo đưa router vào
// để toàn bộ ứng dụng sử dụng được nó.
const app = new Vue({
  router
}).$mount('#app')

// Tạo xong app!

Sau khi đưa router vào thì ta có thể truy cập nó thông qua this.$router và truy cập route hiện thời thông qua this.$route trong mỗi component:

// Home.vue
export default {
  computed: {
    username () {
      // We will see what `params` is shortly
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

Lý do ta dùng this.$router là bởi ta không cần import router trong mỗi single component để thao tác với route.

Lưu ý là <router-link> sẽ tự động lấy class .router-link-active khi route target của nó tương thích.

» Tiếp: Khớp route động
« Trước: Cài đặt
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!