Vue uses vue meta info to set the title and meta information of each page

title: vue uses vue-meta-info to set the title and meta information of each page #The display name on the article page, usually in Chinese

date: 2019-11-20 16:30:16 #The time when the article was created. Generally, it is not changed. Of course, it can be modified at will.

categories: vue #Categories

tags: [vue] #Article tags, can be empty, please use the format for multiple tags, note: there is a space after

description: vue uses vue-meta-info to set the title and meta information of each page

To use vue-meta-info to configure title and meta, follow these steps:

1. Installation

npm install vue-meta-info --save

2. Import in main.js

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

3. Configure in vue page

<template>
  ...
</template>
 
<script>
  export default {
    metaInfo:
      title: 'My Example App', // set a title
      meta: [ // set meta
      	{                
        	name: 'keyWords',
        	content: 'My Example App'
      	},
      	{
        	name: 'description',
        	content: 'This is a description of a web page'
   		 }
      ]
      link: [{ // set link
       		rel: 'asstes',
        	href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

If your title or meta is loaded asynchronously, you may need to use this

<template>
  ...
</template>
 
<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>

If you use Vue SSR to render the page, you need to pay attention to:

Since there is no dynamic update, among all the lifecycle hook functions, only beforeCreate and created will be called during the server-side rendering (SSR) process. This means that code in any other lifecycle hook functions (such as beforeMount or mounted) will only be executed on the client side. Also note that you should avoid code that has global side effects during the beforeCreate and created lifecycles, such as using setInterval to set a timer. In client-side only code, we can set a timer and then destroy it during the beforeDestroy or destroyed lifecycle. However, since the destroy hook function is not called during SSR, the timer will be retained forever. To avoid this, move the side-effect code into the beforeMount or mounted lifecycle.

Based on the above constraints, we can currently use static data to render our metaInfo. Here is an example:

<template>
  ...
</template>
 
<script>
  export default {
    metaInfo:
      title: 'My Example App', // set a title
      meta: [{ // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{ // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

At this time, vueMetaInfo will help us mount a title variable and a render object in the context of ssr. Something like this:

context = {
  ...
  title: 'My Example App',
  render: {
    meta: function () { ... },
    link: function () { ... }
  }
}

At this point, we can transform our template:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    {{{render.meta && render.meta()}}}
    {{{render.link && render.link()}}}
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

This will allow you to render the required data. It is worth noting that although we can use

<template>
  ...
</template>
 
<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>

Notice:

This form is used to define data, but the final rendered title is still loading, because server-side rendering does not have a mounted hook except create and beforeCreate.

Summarize

This is the end of this article about how to use vue meta info to set the title and meta information of each page. For more relevant vue settings page title and meta information content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

How to dynamically set meta tags and title tags in Vue
Detailed explanation of the usage of meta in vue-router
Detailed explanation of how vue-meta allows you to manage head tags more elegantly
vue+vue-meta-info dynamic setting meta tag tutorial

<<: W3C Tutorial (1): Understanding W3C

>>: Understanding the CSS transform-origin property

Vue uses vue meta info to set the title and meta information of each page

Pure CSS to achieve automatic rotation effect of carousel banner

Solution to the problem that mixin does not work in scss (browser cannot compile it)

Common causes and solutions for slow MySQL SQL statements

Double loading issue when the page contains img src

MySql forgotten password modification method is suitable for versions 5.7 and above

CSS achieves the effect of two elements blending (sticky effect)

Several ways to change MySQL password

SVG button example code based on CSS animation

The failure to play flv/MP4 and other video files on the website is related to the MIME type.

Interview questions: The difference between the Holy Grail layout and the double-wing layout

Recommend

Understanding and using React useEffect

CentOS7 enables MySQL8 master-slave backup and daily scheduled full backup (recommended)

Web page WB.ExecWB control printing method call description and parameter introduction

MySQL learning notes help document

MYSQL unlock and lock table introduction

How to prevent computer slowdown when WIN10 has multiple databases installed

MySQL 8.0.16 installation and configuration graphic tutorial under macOS

Detailed Analysis of Event Bubbling Mechanism in JavaScript

What does the n after int(n) in MySQL mean?

CSS new feature contain controls page redrawing and rearrangement issues

MySQL database constraints and data table design principles

Steps to configure IIS10 under Win10 and support debugging ASP programs

Teach you how to implement Vue3 Reactivity

How to permanently change the host name in Linux

Detailed explanation of ES6 Promise usage