Tìm hiểu Vue Router qua ví dụ thực tế

1.Mở đầu

Vuejs cung cấp các tính năng để xây dựng các thành phần Web có thể tái sử dụng. Routing là một trong số đó, cho phép ta có thể dễ dàng điều hướng giữa các trang mà không cần phải tải lại toàn bộ trang.

2.Tạo project

Trước tiên bạn cần cài đặt Nodejs. Sử dụng vue-cli để tạo project mới xem hướng dẫn tại đây. Chạy lệnh sau để tạo project mới.

vue init webpack vue-router

cd vue-router

npm run dev

3.Tạo router

Sau khi đã cài đặt xong mở http://localhost:8080 xem project đã cài thành công chưa

Sửa code trong file App.vue:

<template>
  <div id="app">
    <div class="nav-bar">
      <span>Home</span>
      <span>Blog</span>
      <span>Service</span>
      <span>Contact</span>
    </div>
    <router-view/>
  </div>
</template>

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

<style>
.nav-bar {
  display: flex;
}
.nav-bar span {
  margin-right: 5px;
}
</style>

Tạo file home.vue trong thư mục components với code như sau:

<template>
  <div class="home">
    <h1>Home page</h1>
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
      msg: 'Home page'
    }
  }
}
</script>

Sau đó vào index.js trong thư mục router sửa như sau:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home.vue'

Vue.use(Router)

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

Ta có thành quả như thế này:

Tương tự ta sẽ tạo thêm 3 component nữa là Blog,Services và Contact.

4.Routers config

Sau khi đã tạo các component, chúng ta cần cấu hình các router để có thể điều hướng giữa các component. Các bước cấu hình như sau:

• Đầu tiên, import các component đó vào file index.js

import blog from '@/components/blog'
import services from '@/components/services'
import contact from '@/components/contact'

• Tiếp theo import vue và Router module từ vue-router module

import Router from 'vue-router'
// use router
Vue.use(Router)

• Cuối cùng truyền vào router method một mảng object

  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/blog',
      name: 'blog',
      component: blog
    },
    {
      path: '/services',
      name: 'services',
      component: services
    },
    {
      path: '/contact',
      name: 'contact',
      component: contact
    }
  ]
})

Trong đó:
* path: là đường dẫn của component
* name: tên component
* component: component muốn đặt vào

Muốn component nào làm thành phần mặc định, đặt dấu gạch chéo (/) vào thuộc tính path. Trong ví dụ này chúng ta đặt trang home là trang mặc định khi bạn mở project trên trình duyệt thì trang xuất hiện đầu tiên là trang home.

Giờ bạn có thể mở trình duyệt nhập tên của component và xem kết quả!!

5.Router-link

Bây giờ chúng ta sẽ tạo điều hướng thông qua navbar mà ta đã tạo bằng cách sử dụng router-link

Chúng ta thay thế thẻ </a> bằng <router-link> như vậy:

    <li class="nav-item">
      <router-link class="nav-link" to="/blog">Blog</router-link>
    </li>
    <li class="nav-item">
      <router-link class="nav-link" to="/services">Services</router-link>
    </li>
    <li class="nav-item">
       <router-link class="nav-link" to="/contact">contact</router-link>
    </li>

6. Lời kết

Qua ví dụ thực tế đơn giản trên sẽ giúp bạn hiểu cũng như áp dụng vue-router vào dự án của mình. Để hiểu sâu hơn cách thức hoạt động các bạn có thể tham khảo tài liệu dưới đây:

https://vuejs.org/v2/guide/migration-vue-router.html#Route-Definitions

Nguồn: blog.vietnamlab.vn