Vue Router là công cụ quản lý định tuyến chính thức cho Vue.js

Cài đặt tự động toàn cục:

vue create tên_dự_án

Cài đặt thủ công:

1. Cài đặt

Trong thư mục dự án app

npm i vue-router

2. Nhập thư viện trong min.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';

3. Sử dụng use để khai báo (sử dụng)

Vue.use(VueRouter);

4. Cần cấu hình router -> route.js

Nhập các thành phần và thiết lập bảng định tuyến Thiết lập bảng định tuyến (đường dẫn nào sẽ gọi thành phần nào)

const routes = [ 
//Định nghĩa đường dẫn nào thì chạy thành phần nào
  {
      path:'/', //Đường dẫn gốc
      component:app //app chính là gốc
  },
  { 
    path: '/foo',//Đường dẫn
    component: Foo//Thành phần
  },
  { 
    path: '/bar',
    component: Bar
  }
];
export default new VueRouter({
    routes:routes
    //Tương đương
    //routes
})

Khi tạo mới VueRouter, sử dụng routes để truyền cấu hình

Khi tạo mới Vue, dùng router để truyền định tuyến

5. Đặt vào gốc

 new Vue({
    el:'#app',
    render:()=>h,
    router
 })

6. Hiển thị, định nghĩa thẻ router-view trong trang

<router-link></router-link>
//Khi có children, thành phần cha phải có router-view
<router-view></router-view>
//Thành phần phù hợp sẽ được hiển thị ở đây

<router-link>//Mặc định sẽ tạo thành một thẻ a
<router-link tag="button">
//Có thể thêm kiểu dáng nút bấm

---

Thuộc tính to

Chỉ định địa chỉ đích của liên kết

Sử dụng thuộc tính to để chỉ định địa chỉ đích Mặc định sẽ tạo thành phần <a> với liên kết đúng

/*Chuỗi*/
<router-link to="home">home</router-link>

/*Biểu thức JS với v-bind */
Nếu dùng :to, đường dẫn phải là chuỗi

Ví dụ: <router-link :to="'home'">Home</router-link>

:to có thể là chuỗi hoặc đối tượng

/*Định danh định tuyến params*/
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

/*Có tham số truy vấn, kết quả là /register?plan=private*/
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

:to="{path:'a'}"
:to="{params:{a:5}}" 

Lưu ý: nếu dùng params, không thể định nghĩa path, nên dùng name thay thế

Thuộc tính tag

Thành phần router-link với tag sẽ được tạo thành phần tương ứng

//Ví dụ tạo nút bấm
<router-link tag ="button"></router-link>

Thuộc tính replace

Khi thêm replace vào thẻ router-link, việc chuyển đổi trang sẽ không lưu lịch sử

<router-link :to="/home" replace></router-link>

Thuộc tính active-class

Giá trị mặc định "router-link-active"

Đặt lớp CSS khi liên kết được kích hoạt

<router-link :to="/home" active-class="u-link--Active">Home</router-link>

Có thể thiết lập trong file router.js

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // Lớp CSS khi liên kết được kích hoạt
})

Thuộc tính exact

Bật chế độ nghiêm ngặt của router-link, giá trị mặc định là false

//Liên kết này chỉ kích hoạt khi địa chỉ là /
<router-link :to="/" exact>home</router-link>

Thuộc tính exact-active-class

Giá trị mặc định router-link-exact-active

Cấu hình lớp CSS khi liên kết khớp chính xác

Lớp CSS áp dụng cho phần tử bên ngoài

Để lớp CSS áp dụng cho phần tử bên ngoài, không phải chính <a>, có thể dùng <router-link> bao bọc <a> nguyên thủy

<router-link tag="li" to="/foo">
  <a>/foo</a>
</router-link>

Định tuyến lồng nhau

Định tuyến lồng nhau là việc nhiều cấp định tuyến nằm trong nhau, tức là định tuyến con

Ví dụ:

Tệp APP.vue

<template>
  <div id="app">
    <router-link to="/" tag="button">home</router-link>
    <router-link to="/About" tag="button">about</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
</script>
<style>
.actived{
  background:orange;
}
</style>

Tệp About.vue

(Nội dung chứa ba trang con sub1, sub2, sub3)

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <router-link to="/about/sub1" tag="button">sub1</router-link>
    <router-link to="/about/sub2" tag="button">sub2</router-link>
    <router-link to="/about/sub3" tag="button">sub3</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name:'about'
}
</script>

Tệp định tuyến router.js

 1 import Vue from 'vue';
 2 import VueRouter from 'vue-router';
 3 import Home from '../views/Home.vue'
 4 import About from '../views/About.vue'
 5 import Sub1 from '../views/sub/sub1.vue'
 6 import Sub2 from '../views/sub/sub2.vue'
 7 import Sub3 from '../views/sub/sub3.vue'
 8 Vue.use(VueRouter);
 9 
10 const routes = [
11     {
12         path:'/',
13         component:Home
14     },
15     {
16         path:'/About',
17         component:About,
18         children:[
19             {
20                 path:'sub1',
21                 component:Sub1
22             },
23             {
24                 path:'sub2',
25                 component:Sub2
26             },
27             {
28                 path:'sub3',
29                 component:Sub3
30             }
31         ]
32        
33     }
34 ]
35 
36 export default new VueRouter({
37     linkExactActiveClass:'actived',//Lớp CSS cho lựa chọn chính xác
38     routes
39 });

Thêm thuộc tính children vào định tuyến, children là mảng

Đường dẫn con không cần dấu /

Cách dùng <router-view></router-view>

Nếu có định tuyến con, nhớ thêm <router-view></router-view> vào thành phần cha

Khi đó thành phần sẽ hiển thị trong thành phần cha

Dù có bao nhiêu cấp cũng tuân theo quy tắc này, với nhiều cấp có thể dùng một mẫu

Theo cách viết thông thường, mỗi đường dẫn (/xxx) tương ứng với một router-view

Ví dụ url: /a/b/c

Thì /a tương ứng với router-view trong App.vue, /a sẽ vào a.vue

/a/b tương ứng với router-view trong a.vue, /a/b sẽ vào b.vue