Shulou(Shulou.com)06/03 Report--

This article mainly introduces how vue uses vue meta info to set up title and meta information on each page, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

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

Date: 2019-11-20 16:30:16 # the generation time of the article is generally unchanged, of course, it can be modified at will

Categories: vue # classification

Tags: [vue] # article tag, but empty, multiple tags please use format, note: there is a space after it

Description: vue uses vue-meta-info to set title and meta information for each page

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

1. Installation

Npm install vue-meta-info-save

two。 Introduce in main.js

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

3. Configure on the vue page

... 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/'}]}}

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

... Export default {name: 'async', metaInfo () {return {title: this.pageName}}, data () {return {pageName:' loading'}}, mounted () {setTimeout (() = > {this.pageName = 'async'}, 2000)}}

If you use Vue SSR to render the page, you need to note that:

Because there are no dynamic updates, of all the lifecycle hook functions, only beforeCreate and created are called during server-side rendering (SSR). This means that any code in any other lifecycle hook function, 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 the beforeCreate and created lifecycle, such as using setInterval to set timer. In the pure client (client-side only) code, we can set up a timer and then destroy it during the beforeDestroy or destroyed life cycle. However, since the destroy hook function is not called during SSR, timer will remain forever. To avoid this, move the side effect code to the beforeMount or mounted lifecycle.

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

... 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/'}]}}

At this point, 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 modify our template:

{{title}} {{render.meta & & render.meta ()}} {{render.link & & render.link ()}

In this way, you can render the data you need. It is worth noting that although we can use the

... Export default {name: 'async', metaInfo () {return {title: this.pageName}}, data () {return {pageName:' loading'}}, mounted () {setTimeout () = > {this.pageName = 'async'}, 2000)}

Note:

The data is defined in this form, but the final rendered title is still loading, because the server rendering does not have mounted hooks except created and beforeCreate.

Thank you for reading this article carefully. I hope the article "how vue uses vue meta info to set up title and meta information on each page" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.