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


Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

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
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!