Vue Router và Vuex: Hướng dẫn triển khai ứng dụng Vue.js

Vue Router là trình quản lý路由 chính thức của Vue.js, giúp chúng ta triển khai路由 cho các ứng dụng trang đơn (Single Page Application, SPA).

Dựa trên tư duy thành phần của Vue.js, Vue Router coi mỗi路由 như một thành phần, cung cấp nhiều cách để định nghĩa và hiển thị thành phần. Vue Router có thể điều khiển nội dung hiển thị trên trang thông qua địa chỉ URL mà không cần làm mới toàn bộ trang. Nó cũng hỗ trợ chuyển hướng路由 và truyền thông tin qua lập trình.

Các đặc điểm chính của Vue Router bao gồm:

Router lồng nhau: Vue Router hỗ trợ router lồng nhau, cho phép tổ hợp và lồng ghép cấu hình router để tạo bố cục trang phức tạp và linh hoạt.
Tham số router: Vue Router hỗ trợ tham số router động, có thể điều khiển nội dung hiển thị của trang thông qua các tham số.
Router theo lập trình: Vue Router hỗ trợ router theo lập trình, có thể thực hiện chuyển hướng router và truyền thông tin bằng cách viết code.
Người bảo vệ điều hướng: Vue Router hỗ trợ người bảo vệ điều hướng, có thể thực hiện các hàm hook tương ứng trước, sau và khi hủy bỏ chuyển hướng router.
Tải router lười biếng: Vue Router hỗ trợ tải router lười biếng, có thể tải động các thành phần router theo nhu cầu, từ đó cải thiện hiệu suất và tốc độ tải của ứng dụng.

Triển khai thực tế Vue Router:

Dưới đây là một ví dụ đơn giản về Vue Router, minh họa cách thực hiện chuyển hướng router và truyền thông tin:

Đầu tiên, cài đặt Vue Router trong dự án, có thể sử dụng npm hoặc yarn:
```
npm install vue-router
```
Tạo một tệp router.js trong dự án Vue.js để cấu hình router:
```
import Vue from 'vue'
import Router from 'vue-router'
import TrangChu from './views/TrangChu.vue'
import ThongTin from './views/ThongTin.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'trang-chu',
      component: TrangChu
    },
    {
      path: '/thong-tin/:ma-so',
      name: 'thong-tin',
      component: ThongTin
    }
  ]
})
```
Trong ví dụ này, chúng ta đã import Vue, Vue Router và hai thành phần trang là TrangChu và ThongTin. Sau đó, chúng ta đăng ký plugin Vue Router bằng Vue.use(Router) và tạo một thể hiện Router. Trong cấu hình routes của thể hiện Router, chúng ta định nghĩa hai quy tắc router tương ứng với hai thành phần trang. Trong đó, quy tắc router thứ hai sử dụng :ma-so để biểu thị đây là một tham số router động, có thể điều khiển nội dung hiển thị của trang thông qua các tham số.
Trong tệp main.js, import router.js và gắn đối tượng router vào thể hiện Vue:
```
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
```
Trong ví dụ này, chúng ta import router.js và gắn đối tượng router vào thuộc tính router của thể hiện Vue. Như vậy, chúng ta có thể sử dụng các chức năng router do Vue Router cung cấp trong thể hiện Vue.
Sử dụng chuyển hướng router và truyền thông tin trong các thành phần trang:
```
// TrangChu.vue
<template>
  <div>
    <h1>Trang Chủ</h1>
    <button @click="chuyenDenThongTin">Đến Trang Thông Tin</button>
  </div>
</template>

<script>
export default {
  methods: {
    chuyenDenThongTin() {
      this.$router.push({ name: 'thong-tin', params: { maSo: 123 }})
    }
  }
}
</script>
```
```
// ThongTin.vue
<template>
  <div>
    <h1>Trang Thông Tin</h1>
    <p>Mã số: {{ $route.params.maSo }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.params.maSo)
  }
}
</script>
```
Trong ví dụ này, chúng ta định nghĩa một nút trong thành phần trang TrangChu, khi nút được nhấp, sử dụng phương thức this.$router.push để thực hiện chuyển hướng router, và chỉ định router đích và tham số router thông qua các thuộc tính name và params. Trong thành phần trang ThongTin, chúng ta lấy tham số router thông qua $route.params.maSo và xuất giá trị tham số trong hàm hook mounted.

Sử dụng router hook để xử lý router:

Chúng ta cũng có thể sử dụng các hàm hook router để chặn và xử lý router:

import Vue from 'vue'
import Router from 'vue-router'
import TrangChu from './views/TrangChu.vue'
import ThongTin from './views/ThongTin.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'trang-chu',
      component: TrangChu
    },
    {
      path: '/thong-tin/:ma-so',
      name: 'thong-tin',
      component: ThongTin
    }
  ]
})

router.beforeEach((den, tu, tiepTheo) => {
  console.log('Chặn router:', den.name)
  tiepTheo()
})

export default router

Trong ví dụ này, chúng ta định nghĩa một bộ chặn router thông qua phương thức router.beforeEach. Khi người dùng thực hiện chuyển hướng router, phương thức này sẽ được kích hoạt, có thể thực hiện một số logic kinh doanh trong phương thức này, chẳng hạn như ghi lại lịch sử truy cập của người dùng, xác thực quyền người dùng, v.v. Sau khi xử lý xong, cần gọi phương thức next để tiếp tục thực hiện chuyển hướng router.

Ngoài phương thức beforeEach, Vue Router còn cung cấp nhiều hàm hook router khác, chẳng hạn như afterEach, beforeResolve, beforeEnter, v.v., có thể chọn các hàm hook khác nhau tùy theo nhu cầu kinh doanh cụ thể.

Tạo ứng dụng Vue với Vue Router và Vuex:

Cài đặt Vue Router và Vuex:

yarn add vue-router@next
yarn add vuex@next

Tạo thư mục views trong src để quản lý nội dung trang của dự án, sau đó tạo hai trang TrangChu.vue and ThongTin.vue với nội dung sau:
```
// ThongTin.vue
<template>
    Đây là trang Thông Tin.
</template>

// TrangChu.vue
<template>
    Đây là trang Chủ!
</template>
```

Tạo thư mục router trong src để quản lý nội dung liên quan đến router, sau đó tạo index.js với nội dung sau, sử dụng hình thức tải lười biếng để import các thành phần (cách viết component như sau):

import { taoRouter, taoLichSuWebHash } from "vue-router";
const duongDan = [
    {
        path:'/',
        name:'TrangChu',
        component:()=>import('../views/TrangChu.vue')
    },
    {
        path:'/thong-tin',
        name:'ThongTin',
        component:()=>import('../views/ThongTin.vue')
    }
];
const router = taoRouter({
    history:taoLichSuWebHash(),
    duongDan
})

export default router

Chỉnh sửa APP.vue như sau:

<script setup>
</script>

<template>
 <div id="nav">
  <router-link to="/">Trang Chủ</router-link>|
  <router-link to="/thong-tin">Thông Tin</router-link>
 </div>
 <router-view></router-view>
</template>

<style>
#app{
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top:60px;
}
</style>

Trong main.js, import tệp router và gắn vào thể hiện dự án, như nội dung in đậm sau:

import { taoUngDung } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

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

Tạo thư mục store trong src để quản lý trạng thái, sau đó tạo tệp index.js, đặt một giá trị đếm count với giá trị ban đầu là 0, và có thể thay đổi giá trị này thông qua phương thức increase của mutations, mã code như sau:
```
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    tang(state) {
      state.count++
    }
  },
  actions: {
    tang({ commit }) {
      commit('tang')
    }
  },
  getters: {
    getCount: state => state.count
  }
})
```

Trong main.js, import Vuex và gắn vào ứng dụng:

import { taoUngDung } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'

taoUngDung(App).use(router).use(store).mount('#app')

Vue Router và Vuex là hai thành phần quan trọng trong hệ sinh thái Vue.js, giúp quản lý routing và trạng thái ứng dụng một cách hiệu quả. Vue Router xử lý điều hướng giữa các trang, trong khi Vuex quản lý trạng thái chung của ứng dụng. Cả hai cùng nhau tạo nên một cấu trúc ứng dụng mạnh mẽ và dễ bảo trì.

Thẻ: Vue Router Vuex Vue.js spa frontend-routing

Đăng vào ngày 10 tháng 6 lúc 17:37

Thành phố Cuồng loạn

Vue Router và Vuex: Hướng dẫn triển khai ứng dụng Vue.js

Vue Router và Vuex: Hướng dẫn triển khai ứng dụng Vue.js

Triển khai thực tế Vue Router:

Sử dụng router hook để xử lý router:

Tạo ứng dụng Vue với Vue Router và Vuex:

Thẻ Phổ Biến