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
