VueJS – Routing

Router trong VueJS không có sẵn, để sử dụng cần cài đặt thêm gói này. Một số cách cài phổ biến:

Unpkg

Bạn có thể tải file JS về hay dùng CDN.

https://unpkg.com/vue-router/dist/vue-router.js

Để sử dụng, thêm file vue-router.js vào sau vue.js.

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

NPM

npm install vue-router

GitHub

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

Ở những ví dụ sau mình sẽ dùng file vue-router.js.

Ví dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script type = "text/javascript" src = "https://unpkg.com/vue-router/dist/vue-router.js"></script>
   </head>
   <body>
      <div id = "app">
         <h1>Routing Example</h1>
         <p>
            <router-link to = "/route1">Router Link 1</router-link>
            <router-link to = "/route2">Router Link 2</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
         const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for routes: routes
         });
         var vm = new Vue({
            el: '#app',
            router // short for router: router
         });
      </script>
   </body>
</html>

Kết quả

Đầu tiên, chúng ta thêm file vue-router.js vào sau file vue.js để thêm gói vue-router. Mình sử dụng CDN hay có thể tải về file này.

<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type = "text/javascript" src = "https://unpkg.com/vue-router/dist/vue-router.js"></script>

Trong phần body, chúng ta thêm 2 link với <router-link>.

<p>
   <router-link to = "/route1">Router Link 1</router-link>
   <router-link to = "/route2">Router Link 2</router-link>
</p>

<router-link> là một component giúp điều hướng nội dung HTML hiển thị đến người dùng. Trong ví dụ này, chúng ta tạo 2 <router-link> sử dụng 2 template khác nhau.

Tiếp theo, chúng ta khai báo 2 hằng số Route1, Route2 chứa 2 template để hiển thị.

const  Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' };

Với mỗi path sẽ hiển thị 1 template khác nhau.

const routes = [
   { path: '/route1', component: Route1 },
   { path: '/route2', component: Route2 }
];

Tạo VueRouter instance với tham số là routes.

const router = new VueRouter({
   routes // short for 

routes: routes


});

Và truyền hằng router vừa tạo vào hàm chính của vue instance.

var vm = new Vue({
   el: '#app',
   router // short for router: router
});

Khi click vào link, template sẽ thay đổi đồng thời link sẽ được add thêm class “router-link-exact-active router-link-active

Thuộc tính của Router Link

to

Chứa path, khi click vào, nó sẽ truyền giá trị này vào router.push(). Và hiển thị trên url. Có thể truyền vào string hay object.

<router-link to = "/route1">Router Link 1</router-link>
<router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>

Trong ví dụ trên, chúng ta có thể truyền query vào url. #/route1?name=Tery

Kết quả

replace

Khi thêm replace, router-link sẽ gọi router.replace() thay cho router.push(). Điểm khác nhau chính là nó không lưu trữ lịch sử điều hướng. Nghĩa là khi nhấn mũi tên back trên trình duyệt sẽ không trở về trang trước nó.

<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}"   replace>Router Link 1</router-link>

append

append giúp tạo ra các đường dẫn tương đối. Ví dụ như bạn đang ở path /route1 muốn vào url /route1/route2.

<router-link v-bind:to = "{ path: 'route2'}" append>Router Link 2</router-link>

tag

Mặc định router-link sẽ render ra thẻ a, nếu bạn muốn render ra 1 thẻ khác ví dụ như span thì dùng thuộc tính tag của router-link.

Khi click vào thẻ span này chúng ta cũng chuyển hướng được như thẻ a.

active-class

Mặc định khi click vào router link nó sẽ active và được thêm vào 2 class là router-link-activeexact-active-class để thay đổi class router-link-active thêm vào này, chúng ta sử dụng active-class.

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Khi route1 được active, nó đã thay class router-link-active bằng _active. Chúng ta có thể viết css cho class mới này.

exact-active-class

Tương tự để thay đổi class exact-active-class chúng ta dùng code như bên dưới:

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_exact-active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

event

Theo mặc định, event để chuyên router sẽ là click, bạn có thể thay đổi thông qua thuộc tính event. Ở ví dụ này mình sử dụng sự kiện rê chuột vào.

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

Bạn chỉ cần rê chuột vào Router Link 1 nó sẽ chuyển hướng ngay.