VueJS – Hướng dẫn làm Admin Dashboard – Phần 3: Router

Nhúng vue-router package vào trang Web

npm install vue-router

Tạo 2 Page chứa nội dung

Bạn tạo folder src\pages

Sau đó tạo 2 file HomePage.vue & ListPage.vue với nội dung như sau

HomePage.vue

<template>
    <h1>This is Home Page</h1>
</template>

ListPage.vue

<template>
    <h1>This is List Page</h1>
</template>

Tạo file Router

Bạn vào folder src\router và tạo file app-router.js với nội dung như sau

import Vue from "vue";
import Router from "vue-router";
import HomePage from "@/pages/HomePage.vue";
import ListPage from "@/pages/ListPage.vue";

Vue.use(Router);

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "HomePage",
      component: HomePage,
    },
    {
      path: "/list-page",
      name: "ListPage",
      component: ListPage,
    }
  ],
});

export default router;

Ý nghĩa của file này là khi mình nhập đúng url thì nó sẽ trỏ tới 2 pages tương ứng mà mình đã tạo & import

Đăng ký file Router vào App

Để sử dụng được file app-router.js bạn phải khai báo trong file app-router.js với nội dung như sau.

Chú ý dòng 3 & 8 nhé

import Vue from 'vue'
import App from './App.vue'
import router from './router/app-router.js'

Vue.config.productionTip = false

new Vue({
  router: router,
  render: h => h(App),
}).$mount('#app')

Sử dụng Router trong App

Sau khi đăng ký xong là bạn có thể sử dụng được Router rồi.

Đầu tiên bạn mở file src\App.vue ra và thêm thẻ <router-view /> vào như sau

<template>
  <div id="app">
      <AdminDashboard>
          <template v-slot:LayoutContent>
              <router-view />
          </template>
      </AdminDashboard>
  </div>
</template>

<script>
import AdminDashboard from './layout/AdminDashboard.vue'
export default {
  name: 'App',
  components: {
    AdminDashboard
  }
}
</script>

Bạn để ý thấy thẻ v-slot chứ?

Mình sẽ giải thích chỗ này tí để hiểu rõ hơn thẻ v-slot là để render nội dung vào view nào có chứa slot đó.

Trong tutorial này thì đó là file src\layout\AdminDashboard.vue dòng số 10 nha

<template>
    <div>
        <Header />
        <div id="layoutSidenav">
           <SideBar />
           <div id="layoutSidenav_content">
              <main>
                  <div class="container-fluid">
                      <!-- Page content -->
                       <slot name="LayoutContent" />
                      <!-- Page content -->
                  </div>
              </main>
           </div><!--end #layoutSidenav_content -->
           <Footer />
        </div><!-- end #layoutSidenav -->
    </div>
</template>

Sửa Sidebar để có thể sử dụng Router

Để sử dụng được router thì phải sử dụng các thẻ của vue-router để điều hướng.

Ở Admin Dashboard thì mình có Sidebar là chứa các menu điều hướng. Vì thế mình sẽ phải Edit component này

Mở file src\components\common\SideBar.vue ra và update như sau

<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"> 
                    <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">
                    <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>

Các bạn để ý thấy thẻ router-link to=”/” sẽ điều hướng tới HomePage.vue như trong file app-router.js đã config

Tương tự cho thẻ router-link to=”/list-page” cũng sẽ điều hướng tới page ListPage.vue

Kết quả

Xong rồi, lưu lại và chạy lệnh run app lên thử xem nào

npm start

Tata, và đây là kết quả

Bài tiếp theo mình sẽ hướng dẫn mọi người show Active menu để người dùng đang biết mình đứng ở Page nào nhé