Giới thiệu 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é