VueJS – Hướng dẫn làm Admin Dashboard – Phần 4: Hiển thị Active Menu

Ở bài trước mình đã nghiên cứu được cách điều hướng & hiển thị nội dung với mỗi đường link tương ứng rồi đúng không mọi người.

Nhưng nó có 1 vấn đề là User không thể biết được họ đang đứng ở màn hình nào khi nhìn vào thanh Sidebar bên trái. Vì nó cùng màu với nhau.

Do đó mình sẽ làm cho nổi bật màn hình mà user đang đứng lên để người dùng có thể biết được họ đang ở đâu nhé.

Tạo class Active cho thẻ router

Để menu có thể đổi sang màu khác thì bạn cần phải gán thẻ active cho nó đúng không?

Ở đây là mình sẽ sinh ra class active trong file src\components\common\SideBar.vue như sau.

router-link to="/" class="nav-link active"

Khi bạn thêm class active vào thì menu Dashboard sẽ đổi màu như thế này

Nhưng như thế là Hard Code rồi và sau này nếu có thêm nhiều Menu nữa thì phải làm sao.

Do đó thì mình cần phải Code động chỗ này. Cách xử lý như sau.

Code động class active

Đầu tiên bạn phải tạo phương thức để kiểm tra xem mình đang ở router name là gì.

Trong file src\components\common\SideBar.vue bạn thêm 1 phương thức isActive như sau

<script>
export default {
  name: "SideBar",
  methods: {
    isActive: function (currentRouterName) {
      return currentRouterName.includes(this.$route.name);
    },
  },
};
</script>

Ý nghĩa của đoạn code này như sau

this.$route.name => sẽ lấy router name hiện tại của url trên trình duyệt. (cái mà chúng ta khai báo trong file app-router.js) Sau đó so sánh với tên currentRouterName mình truyền vào. Nếu bằng nhau thì trả về true, ngược lại sẽ trả về false.

Sau đó chúng ta lên trên sửa lại đoạn code chỗ router-link tí để sử dụng được method vừa tạo

<router-link to="/" class="nav-link" :class="{ active: isActive(['HomePage']) }"> 

Ý nghĩa: Nếu method isActive trả về true sẽ sinh ra class active

Code hoàn chỉnh cho SideBar.vue sẽ như sau

<template>
    <div id="layoutSidenav_nav">
        <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
        <div class="sb-sidenav-menu">
            <div class="nav">
                <div class="sb-sidenav-menu-heading">Home</div>
                <router-link to="/" class="nav-link" :class="{ active: isActive(['HomePage']) }"> 
                    <div class="sb-nav-link-icon">
                    <i class="fas fa-tachometer-alt"></i>
                    </div>Dashboard
                </router-link>
                
                <div class="sb-sidenav-menu-heading">Result</div>
                <router-link to="/list-page" class="nav-link" :class="{ active: isActive(['ListPage']) }">
                    <div class="sb-nav-link-icon">
                    <i class="fas fa-table"></i>
                    </div>List Page
                </router-link>
            </div>
        </div>
        <div class="sb-sidenav-footer">
            <div class="small">Logged in as:</div>webkhoiviet.com
        </div>
        </nav>
    </div>
</template>

<script>
export default {
  name: "SideBar",
  methods: {
    isActive: function (currentRouterName) {
      return currentRouterName.includes(this.$route.name);
    },
  },
};
</script>

Kết quả

Nào bây giờ run project lên và xem kết quả nào

Ở bài tiếp theo mình sẽ hướng dẫn các bạn làm việc với List ở trang List Page nhé.

Xin cảm ơn các bạn