VueJS: Quản lý tiêu đề

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

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ó đến createApp() và tường minh nó trên $options của đối tượng root - các component con sau đó có thể truy cập nó qua this.$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 context trong 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.

» Tiếp: Bộ nhớ đệm (Caching)
« Trước: Quản lý CSS
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!