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

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

Recommend

Detailed explanation on how to get the IP address of a docker container

1. After entering the container cat /etc/hosts It...

How to use Linux whatis command

01. Command Overview The whatis command searches ...

Solve the problem of spring boot + jar packaging deployment tomcat 404 error

1. Spring boot does not support jsp jar package, ...

MySQL uses aggregate functions to query a single table

Aggregate functions Acts on a set of data and ret...

How to configure whitelist access in mysql

Steps to configure whitelist access in mysql 1. L...

How to check if data exists before inserting in mysql

Business scenario: The visitor's visit status...

Pure CSS to achieve left and right drag to change the layout size

Utilize the browser's non- overflow:auto elem...

A brief discussion on VUE uni-app template syntax

1.v-bind (abbreviation:) To use data variables de...

Use of Linux chkconfig command

1. Command Introduction The chkconfig command is ...

Detailed process analysis of docker deployment of snail cinema system

Environmental Statement Host OS: Cetnos7.9 Minimu...

How to use negative margin technology to achieve average layout in CSS

We usually use float layout to solve the compatib...

MySQL multi-instance deployment and installation guide under Linux

What is MySQL multi-instance Simply put, MySQL mu...