Tags View

Đây là một tính năng khá là thú vị dùng để liệt kê các trang đã truy cập - tương tự lịch sử truy cập của browser - được hiển thị dưới dạng tabs. Chức năng này được hiện thực bởi tags

Về mặt kỹ thuật, chức năng này sử dụng keep-alive kết hợp với router-view.

Code: @/layout/components/AppMain.vue

<keep-alive :include="cachedViews">
  <router-view></router-view>
</keep-alive>

Trên thực tế, tags view là danh sách các router-link, khi được click vào thì nó sẽ load view tương ứng. Hệ thống sẽ kiểm tra để quyết định sử dụng trang hiện tại từ cache hay phải load lại.

visitedViews && cachedViews

Tags view quản lý 2 array:

  • visitedViews : Tất cả các trang mà user đã duyệt, được lưu trong một array và hiển thị dạng tags bar.
  • cachedViews : Các route được cache lại (keep-alive). Bạn có thể cấu hình cho 1 route được cache hay không bằng meta.noCache. Xem thêm Router and Nav

Lưu ý

keep-aliverouter-view có mối quan hệ rất chặt chẽ. Hãy chắn chắn rằng bạn sử dụng cùng 1 tên cho 2 thành phần này. Tên của các views/components nên là duy nhất, tránh trùng lặp vì sẽ gây ra nhiều lỗi - ví dụ leak memory.

DEMO:

//Define routes
{
  path: 'create-form',
  component: ()=>import('@/views/form/create'),
  name: 'createForm',
  meta: { title: 'createForm', icon: 'table' }
}
//The corresponding view of the route. such as: form/create
export default {
  name: 'createForm'
}

Tên khai báo giống nhau (createForm), và không được trùng lặp (khai báo ở chỗ khác). Nếu bạn không cung cấp tên cho view, nó sẽ không được cache Chi tiết ở đây: issue.

Cố định Tags view

Nếu thuộc tính affix được sử dụng cho route, tag hiện tại sẽ cố định (fixed, hay pinned) trên tags-view (không thể bị xóa).














 





 {
    path: '',
    component: Layout,
    redirect: 'dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: {
          title: 'dashboard',
          icon: 'dashboard',
          noCache: true,
          affix: true
        }
      }
    ]
  }

Gỡ bỏ Tags view

Trên thực tế, keep-alive source code không quá phức tạp, nhưng logic thì hơi bị lằng nhằng. Bạn có thể xóa nó bằng cách sau:

Đầu tiên, tìm đến file @/layout/components/AppMain.vue và xóa keep-alive

<template>
  <section class="app-main" style="min-height: 100%">
    <transition name="fade-transform" mode="out-in">
      <router-view></router-view> <!-- or <router-view :key="key"/> -->
    </transition>
  </section>
</template>

Xóa file @/layout/components/TagsView.vue, sau đó xóa reference đến TagsView trong @/layout/components/index@/layout/Layout.vue. Sau đó, xóa file @/store/modules/tags-view.js.