12/10/2018, 22:36

Giới thiệu Vue-Router

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ở foder /src/components rồi tạo file ListManager.vue

<template>
    <div>
        <router-link :to="{ name: 'listTeam' }" tag="button" class="btn btn-default glyphicon glyphicon-plus">List Team</router-link>
        <router-link :to="{ name: 'listPlayer' }" tag="button" class="btn btn-default glyphicon glyphicon-plus">List Player</router-link>
        <router-link :to="{ name: 'listManager' }" tag="button" class="btn btn-default glyphicon glyphicon-plus">List Manager</router-link>
        <hr/>
        <p>list manager</p>
    </div>
</template>

tiếp tục tạo file ListPlayer.vue

<template>
    <div>
        <router-link :to="{ name: 'listTeam' }" tag="button" class="btn btn-default glyphicon glyphicon-plus">List Team</router-link>
        <router-link :to="{ name: 'listPlayer' }" tag="button" class="btn btn-default glyphicon glyphicon-plus">List Player</router-link>
        <router-link :to="{ name: 'listManager' }" tag="button" class="btn btn-default glyphicon glyphicon-plus">List Manager</router-link>
        <hr/>
        <p>ListPlayer</p>
    </div>
</template>

Cuối cùng là ListTeam.vue

<template>
    <div>
        <router-link :to="{ name: 'listTeam' }" tag="button" class="btn btn-default glyphicon glyphicon-plus">List Team</router-link>
        <router-link :to="{ name: 'listPlayer' }" tag="button" class="btn btn-default glyphicon glyphicon-plus">List Player</router-link>
        <router-link :to="{ name: 'listManager' }" tag="button" class="btn btn-default glyphicon glyphicon-plus">List Manager</router-link>
        <hr/>
        <p>list team {{ id }}</p>
    </div>
</template>
<script>
<script>
    export default {
         props: ['id'],   // props dùng để truyền dữ liệu từ component cha sang component con, và các component con truyền thông báo đến các component cha thông qua các sự kiện. 
    }
</script>

 

Tiếp theo, mở file /src/router và code:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ListTeam from '@/components/ListTeam'
import ListPlayer from '@/components/ListPlayer'
import ListManager from '@/components/ListManager'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',                // path của route
      name: 'HelloWorld',        // tên route
      component: HelloWorld      //component route sử dụng
    }, {
      path: '/team/:id',
      name: 'listTeam',
      component: ListTeam
    }, {
      path: '/player',
      name: 'listPlayer',
      component: ListPlayer
    }, {
      path: '/manager',
      name: 'listManager',
      component: ListManager
    }
  ],
  mode: 'history' // xóa bỏ dấu #
})

Ở đây, chúng ta cũng tiến hành import Vue, router và các component  ListTeam,ListPlayer,ListManager.

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>

Cuôi cùng bạn hãy vào đường dẫn http://localhost:8080/team/23 để xem kết quả nhé 

Bài liên quan

Giới thiệu Vue-Router

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.

Pham Dat viết 22:36 ngày 12/10/2018

Giới thiệu Vue Native - Làm ứng dụng Native bằng framework Vue

Vue Native vừa được giới thiệu cách đây khoảng hơn 1 tuần, vừa đọc xong cái blog giới thiệu thế là cũng xem qua vọc thử xem có gì hay ho, tiện viết luôn 1 bài Hello World giới thiệu với mọi người. What is Vue Native? Nói ngắn gọn thì nó là một tool có thể tạo ra các ứng dụng native bằng VueJS. ...

Tạ Quốc Bảo viết 18:04 ngày 12/08/2018

Giới thiệu Vue Directives và cách tạo Custom Directives

Khi nói đến VueJS, chúng ta thường chỉ nói đến Component, cách tạo và import component,...Thế nhưng Component không phải là thứ tuyệt vời duy nhất bạn có thể làm với Vue. Trong trường hợp nếu bạn muốn áp dụng một vài chỉnh sửa cho các component của mình, một vài thuộc tính cho các component của ...

Hoàng Hải Đăng viết 17:46 ngày 12/08/2018

Giới thiệu thư viện validate cho Vue JS

Vue.js, gọi tắt là Vue, là một framework linh động dùng để xây dựng giao diện người dùng. Khác với các framework nguyên khối, Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo các bước. Hôm nay mình xin phép được giới thiệu một thư viện validation cho ...

Hoàng Hải Đăng viết 16:57 ngày 12/08/2018

Giới thiệu về framework Vue.js

Vue.js là một framework dùng để xây dựng giao diện người dùng, không giống như các framework khác, Vue được thiết kế từ cơ bản lên. Cốt lõi của thư viện chỉ tập trung vào layer view, và dễ dàng tương tác với thư viện hoặc một dự án khác đã có. Nói một cách khác, vue.js là framework hoàn hảo để ...

Trịnh Tiến Mạnh viết 16:09 ngày 12/08/2018
+1