Last week I posted my first technical blog, Portal 1: ARRAY filtering in JS, from simple filtering to multi-conditional filtering. Thank you for your support, especially those who asked questions and found errors. Thank you. After blogging, I set up a Github pages with Hexo, binding it to the domain I had bought, Portal 2: blog.yidor.cn /. I will post my blog on Github once and copy it to My diggings.

In the past two months, I have been busy building the Vue-SSR project, because the company’s products are media, SEO is very important. In the first week, I tried to build a project with NUXT. Nuxt is really out of the box, which is quite cool. Many people felt the same way with vue-CLI3. Since the company gave me enough time, I decided to refer to the official example of Yuyuxi 🌰 Portal 3: Vue-hacknews-2.0 built our company’s new PC end project, the whole project is from 0 to 1 with Webpack4 + vuE2 + Vue-SSR, and some holes have been taken. Thanks to the contributions of students from various online platforms, I plan to write articles one after another to share the construction process of the project. I hope I can help you.

The next step is to enter the topic of this article. Especially in the large example, we made a tilte Mixin method, which can modify the title of each page. However, our company’s requirement may be that different pages should not only have different titles, but also different descriptions and authors. There are a lot of people using Vue-meta on the Internet, interested partners can search for the usage, today I want to discuss the transformation of the title mixin in the Special project to head mixin, to meet the needs of our company.

Especially the big title mixin

Open the Vue-HackNews project SRC /util/title.js and you can see the following code or portal 4: Vue SSR Guide Head Management

// Get the title in the template
function getTitle (vm) { 
  const { title } = vm.$options
  if (title) {
    return typeof title === 'function'
      ? title.call(vm)
      : title
  }
}

// If there is a title, it will load the new title. If there is no title, it will load the default title
// The following two are called when the server render, the other is called when the client render, why the two are different, see the end of the article

const serverTitleMixin = { 
  created () {
    const title = getTitle(this)
    if (title) {
      this.$ssrContext.title = 2.0 | ` Vue HN${title}`}}}const clientTitleMixin = { 
  mounted () {
    const title = getTitle(this)
    if (title) {
      document.title = 2.0 | ` Vue HN${title}`}}}export default process.env.VUE_ENV === 'server'
  ? serverTitleMixin
  : clientTitleMixin

Copy the code

The file SRC /app.js introduces mixins globally here

. import titleMixinfrom './util/title'.// mixin for handling title
Vue.mixin(titleMixin)
...
Copy the code

This is where the default title is SRC /server.js

.// In the render function
  const context = {
    title: 'Vue HN 2.0'.// default title
    url: req.url
  }
...
Copy the code

SRC /views/ userView.vue

export default {
  name: 'user-view'. title () {return this.user
      ? this.user.id
      : 'User not found'},... }Copy the code

The transformation of Head Mixin

First of all, I need to clarify my requirements. As mentioned at the beginning of this article, only title does not meet my requirements. I also need to be able to customize description, author and keywords.

Component usage

The title is returned as a string. I put what I need into an object. If I need to define it, I return it.

export default {
  name: 'article-list'. head(){return {
        'title': 'Article List'.'author': 'master'}; },... }Copy the code

Default header information

Also in server.js

// This is also in the render function
  const context = {
    'title': 'Cutie King'./ / the default title
    'author': 'Anne'./ / the author by default
    'keywords': 'I am the keywords'./ / the default keywords
    'description': 'I am the description'./ / the default description
    'url': req.url // I am an important line of code, but I have nothing to do with this article
  };// Yes, I am bored. I typed so many boring comments
Copy the code

Introduce global head mixins

Also in SRC /main.js

import headMixin from './utils/head';
// head()
Vue.mixin(headMixin);
Copy the code

Define the head Mixin

In SRC /utils/head.js, this is where I determine if there is a head and if there is anything I need. If there is a head, it will load a new one. If there is no head, it will default.

function getHead (vm) {
  const { head } = vm.$options;

  if (head) {
    return typeof head === 'function'? head.call(vm) : head; }}const serverHeadMixin = {
  created () {
    const head = getHead(this);

    if (head) {
      if (head.title) this.$ssrContext.title = `${head.title}- Lovely king;
      if (head.author) this.$ssrContext.author = `${head.author}- Lovely king;
      if (head.keywords) this.$ssrContext.keywords = head.keywords;
      if (head.description) this.$ssrContext.description = head.description; }}};const clientHeadMixin = {
  mounted () {
    const head = getHead(this);

    if (head) {
      if (head.title) document.title = `${head.title}- Lovely king;
      if (head.author) document.querySelector('meta[name="author"]').setAttribute('content'.`${head.author}- Lovely king);
      if (head.keywords) document.querySelector('meta[name="keywords"]').setAttribute('content', head.keywords);
      if (head.description) document.querySelector('meta[name="description"]').setAttribute('content', head.description); }}};export default process.env.VUE_ENV === 'server' ?
  serverHeadMixin :
  clientHeadMixin;
Copy the code

1. Mixins

I hadn’t used this before this project, portal 5: VUE’s official document on Blending

Mixins are a very flexible way to distribute reusable functionality in Vue components. A mixin object can contain any component option. When a component uses a mixin object, all the options for the mixin object are mixed into the component’s own options.

In short, you can define a custom hook function that is referenced in each Vue instance, such as head() in this article, which is awesome.

Point 2: Server rendering and client rendering have different life cycles

Of all the lifecycle hook functions, only beforeCreate and Created are called during server-side rendering. This is mentioned in the official documentation, so be sure to pay attention to this during development.

Finished!

Aside: Planning for future articles

😁 if you are still watching, help to leave a message! Last week’s post got over 100 likes in Nuggets, happy, special thanks to my friend Dylan for correcting the error and Auroral for reminding me that recursively optimized instance code has nothing to do with DeepClone. I have been working in the front end for more than two years, but I have not output any articles. Last week, I had the whim to organize my own blog. If I can sort out my knowledge and share it, it will also help everyone. I want to write too much, and my energy is limited. I want to list some articles I want to write, one by one. If you see this article, you can comment on which one you want to read. <(￣) ￣)>

  1. Multi-layout implementation of vUE single-page application

  2. From zero to one: Build a Vue project with WebPack4

  3. From zero to one: Build a project with Vue-CLI3

  4. From zero to one: Build a Vue-SSR project with NUXT

  5. From Zero to One: Build your own online blog with Github and Hexo

  6. Vue-ssr series is based on Vue-Hacknhews 2.0

  7. Front-end development of some practical tools class website

    From zero to one it’s been written by a lot of people, but I put it on the list, and if I’m unlucky enough to win, I’ll try to write differently.