VueJS: Quản lý tiêu đề
Tương tự như quản lý nội dung, quản lý tiêu đề tuân theo cùng một ý tưởng: chúng ta có thể đính kèm dữ liệu động vào kết xuất context trong vòng đời của một component, và sau đó nội suy dữ liệu đó vào template.
Trong phiên bản 2.3.2+, bạn có thể trực tiếp truy cập vào context SSR trong một thành phần như
this.$ssrContext. Trong các phiên bản cũ hơn, bạn phải tự chèn ngữ cảnh SSR bằng cách truyền nó đếncreateApp()và tường minh nó trên$optionscủa đối tượng root - các component con sau đó có thể truy cập nó quathis.$root.$options.ssrContext.
Chúng ta có thể viết một mixin đơn giản để thực hiện việc quản lý tiêu đề như sau:
// title-mixin.js
function getTitle (vm) {
// các component có thể đơn giản cung cấp một tùy chọn `title`
// có thể hoặc là một chuỗi hoặc là một hàm
const { title } = vm.$options
if (title) {
return typeof title === 'function'
? title.call(vm)
: title
}
}
const serverTitleMixin = {
created () {
const title = getTitle(this)
if (title) {
this.$ssrContext.title = title
}
}
}
const clientTitleMixin = {
mounted () {
const title = getTitle(this)
if (title) {
document.title = title
}
}
}
// `VUE_ENV` có thể được đưa vào với `webpack.DefinePlugin`
export default process.env.VUE_ENV === 'server'
? serverTitleMixin
: clientTitleMixin
Bây giờ, một route component có thể sử dụng điều này để kiểm soát tiêu đề tài liệu:
// Item.vue
export default {
mixins: [titleMixin],
title () {
return this.item.title
},
asyncData ({ store, route }) {
return store.dispatch('fetchItem', route.params.id)
},
computed: {
item () {
return this.$store.state.items[this.$route.params.id]
}
}
}
Và bên trong template được truyền cho trình kết xuất gói:
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
...
</body>
</html>
Ghi chú:
-
Sử dụng cặp ngoặc xoắn (nội suy thoát HTML) để tránh các cuộc tấn công XSS.
-
Bạn nên cung cấp một tiêu đề mặc định khi tạo đối tượng
contexttrong trường hợp không có component nào đã đặt tiêu đề trong khi hiển thị.
Sử dụng cùng một cách thức, bạn có thể dễ dàng mở rộng mixin này thành một tiện ích quản lý tiêu đề chung.