Vue JS ngày 1 tìm hiểu về vue và gọi route trong vue

1. Cài đặt Vue JS

Mở CMD lên và xem mình đã có npm chưa chưa thì tải về nha

Link nè: https://nodejs.org/en/

Sau khi xong thì mình có thể cài được vue rồi

Có 2 cách 

1. sài NPM : npm install -g @vue/cli

2. yarn global add @vue/cli

Xong cách nào cũng được tiếp theo mình tạo project nào

vue create ten_project

để không bị lổi thì nên thêm bằng cách này:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Ở tren chúng ta đã cài đặt xong vue js giờ bắt đầu tạo router nào

2. Cài đặt vue router

Giống như cài đặt vue mình cũng có 2 cách

1. chèn trực tiếp

<!-- Chèn trực tiếp cdn vào file HTML bằng thẻ <script> --> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2. sài NPM install

npm install vue-router --save

Tiếp đến vào project và tạo 1 file tên routes.js file này dùng để

điều hướng web của chúng ta:

Tiếp đến tại thư mục src/ mình vào components và tạo thêm 1 file tên about.vue

chèn đoạn code này vào file routes.js

Tiếp đến cần khai báo Vue Router trong main.js để nó hiểu mình đang làm cái gì

Đường dẫn src/main.js

Tiếp đến bạn mở file About.vue vừa tạo lúc nãy và thêm nội dung vào cho nó

Khác với HTML hay HTML 5 ở chổ là Vue JS không truyền page bằng thẻ a mà nó

chơi bằng thẻ <router-link>

1 điều cần rất cần là khi nào mình muốn hiển thị router-link thì bắt buộc phải

khai báo router-view không thôi là click không được đâu..

oải chưa không biết systax với từ khóa của nó thì ..

Anh em mở file App.vue và chèn code này vào:

Dầu nhớt đầy đủ rồi test nhẹ cái coi có lổi không

ở đây mình sài

npm run serve

Chạy xong lệnh trên không báo lổi bạn sẽ thấy nó kêu truy cập localhost:8080

kiểu vầy

Chưa còn 2 điều lưu ý bự nữa:

Vue Router có 2 chế độ cho URL đó là dạng hash mode(này là mặc định)

và history

1. Hash Mode : mô phỏng URL ở dạng hash (#)

2. History : dạng này thì hơi quen với anh em front-end hay sài là '/' để

Vue Router hiểu được thì cần đổi sang Hostory mode kiểu vầy