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ằngmeta.noCache
. Xem thêm Router and Nav
Lưu ý
keep-alive
và router-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
và @/layout/Layout.vue
. Sau đó, xóa file @/store/modules/tags-view.js
.