Title: vue use vue-meta-info to set the title and meta information for each page. Categories: vue # category: vue # Category: vue # Category: vue # Category: vue # Category: vue # Category: vue # Category: vue # Category: vue # Category: vue Vue uses vue-meta-info to set the title and meta information for each page

To configure title and meta using vue-meta-info, perform the following steps:

1. Install

npm install vue-meta-info --save
Copy the code

2. Import in main.js

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

3. Configure parameters on the 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>
Copy the code

If your title or meta is loaded asynchronously, you may want 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> 
Copy the code

If you are using Vue SSR to render pages, you need to note that:

Since there is no dynamic update, of all the lifecycle hook functions, only beforeCreate and Created are called during server-side rendering (SSR). This means that any code in other lifecycle hook functions (such as beforeMount or Mounted) will only be executed on the client side. It is also important to note that you should avoid code that has global side effects during beforeCreate and Created life cycles, such as using setInterval to set the timer. In client-side only code, we can set a timer and then destroy it when beforeDestroy or destroyed the lifecycle. However, because the destruction hook function is not called during SSR, the Timer will remain forever. To avoid this, move the side effect code to the beforeMount or Mounted life cycle.

Based on the above constraints, we can currently render our metaInfo using static data. 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> 
Copy the code

VueMetaInfo will help us mount a title variable and a Render object in the SSR context. Something like this:

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

At this point, we can modify 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>Copy the code

This will 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> 
Copy the code

Note:

Created and beforeCreate have no mounted hooks for the created and beforeCreate functions.