Giới thiệu Vue Router

Ngày này, Khi các bạn lên google tìm kiếm với từ khóa "Vuejs" thì chắc chắn thông tin bạn nhận đc sẽ vô cùng nhiều. Bởi vì Vuejs bây giờ đã trở thành một trong những JS Framework đáng học nhất và ngày càng trở lên phổ biến. Ví dụ như mình search với từ khóa "Vuejs là gì?" thì có vô vàn kết quả được hiện lên và mình chọn một trong số chúng:

VueJS là một progressive framework được xây dựng dựa vào nền tảng của ngôn ngữ lập trình phí client Javascript, nhiệm vụ chính của VueJS là dùng để xây dựng giao diện phía người dùng (UI). Không giống với các Framework khác, VueJS chỉ tập trung vào phần giao diện người dùng (view) nên bạn hoàn toàn có thể tích hợp vào project một cách đơn giản tương tự như jQuery. Nếu bạn đã từng học qua Angular thì bạn sẽ thấy có rất nhiều mô hình được đưa ra bởi các lập trình viên có kinh nghiệm, nhưng với VueJS thì bạn hoàn toàn sử dụng tự do.
VueJS là một progressive framework được xây dựng dựa vào nền tảng của ngôn ngữ lập trình phí client Javascript, nhiệm vụ chính của VueJS là dùng để xây dựng giao diện phía người dùng (UI). Không giống với các Framework khác, VueJS chỉ tập trung vào phần giao diện người dùng (view) nên bạn hoàn toàn có thể tích hợp vào project một cách đơn giản tương tự như jQuery. Nếu bạn đã từng học qua Angular thì bạn sẽ thấy có rất nhiều mô hình được đưa ra bởi các lập trình viên có kinh nghiệm, nhưng với VueJS thì bạn hoàn toàn sử dụng tự do.

Trong bài này, mình sẽ không tập trung đi sâu vào nghiên cứu Vuejs là gì nữa, hay cách sử dụng nó thế nào? Mà mình sẽ giới thiệu với các bạn về Vue Router

Cài đặt

Để bắt đầu, trước tiên chúng ta cần cài Vuejs và một vài package cần thiết. Mở terminal lên và thực hiện các lệnh sau:

# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack router-app

Khi chạy các lệnh trên, nếu có câu hỏi được hiển thị trên màn hình thì hãy đảm bảo là bạn sẽ trả lời là "yes" để cài đặt vue-router

This will install Vue 2.x version of the template.

 For Vue 1.x use: vue init webpack#1.0 router-app

? Project name router-app <Enter>
? Project description A Vue.js project  <Enter>
? Author  <Enter>
? Vue build standalone  <Enter>
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

Tiếp theo, cài đặt thêm các dependencies và chạy server dev:

# install dependencies and go!
$ cd router-app
$ npm install
$ npm run dev

Bây giờ, hay mở trình duyện lên và vào địa chỉ http://localhost:8080. Bạn sẽ thấy màn hình welcome của vue.

Tạo ứng dụng

Đầu tiên, mở file /src/router/index.js bằng trình soạn thảo ưa thích của bạn và bắt đầu code.

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

Ở đây, chương trình import Vue, Vue-router, component. ký tự @ ở đây có thể hieur là 1 alias cho thư mục /src của chúng ta.

Tiếp theo, mở file /src/main.js và code:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Ở đây, chúng ta cũng tiến hành import Vue, router và component App. Cuối cùng, khởi tạo một đối tượng Vue mới, được liên kết với div có id là #app ở trong html của chúng ta.

Tiếp theo, mở file /src/App.vue và thêm code;

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

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

Tiếp đến, mở file /src/components/Hello.vue và sửa thành như sau:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'Hello',
    data () {
      return {
        msg: 'Welcome to Vue router'
      }
    }
  }
</script>

Tạo Router

Mở file /src/router/index.js và thêm code

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

Tiếp theo, mở file /src/App.vue và sửa <template> section

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link :to="{ name: 'Hello' }">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

Ở đây, tôi thêm vào 2 <router-link>. 1 router đến màn hình Home còn cái còn lại tới màn hình About. Bây giờ, hãy thêm giao diện cho màn hình About nào. Mở file /src/components/About.vue

<template>
  <div class="about">
    <h1>What is a Crypto-Currency?</h1>
    <p>
      This is about page!!!
    </p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

Đến đây, bạn hãy refresh lại trình duyệt của mình và xem thành quả nhé. Chúc mọi người thành công!^^