title: vue Use vue-meta-info to set the title and meta information of each page #The display name on the article page is usually in Chinese
date: 2019-11-20 16:30:16 #The article generation time is generally not changed, of course it can also be modified at will
categories: vue #Category
tags: [vue] #Article tags, can be empty, please use format for multiple tags, note: There is a space behind it
description: vue Use vue-meta-info to set the title and meta information for each page
To configure title and meta using vue-meta-info follow the steps below:
1. Installation
npm install vue-meta-info --save
2. Introduce
import MetaInfo from 'vue-meta-info' (MetaInfo)
3. Configure on 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 page'
}
]
link: [{ // set link
rel: 'asstes',
href: '/'
}]
}
}
</script>
If your title or meta is loaded asynchronously, you may need to use it like this
<template>
...
</template>
<script>
export default {
name: 'async',
metaInfo () {
return {
title:
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
= 'async'
}, 2000)
}
}
</script>
If you use Vue SSR to render a page, then you need to be aware of:
Since there is no dynamic update, among all life cycle hook functions, only beforeCreate and created will be called during server-side rendering (SSR). That means that any code in any other lifecycle hook function (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 life cycles, such as setting the timer using setInterval. In the 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 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 an example of usage:
<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: '/'
}]
}
}
</script>
At this time, vueMetaInfo will help us mount a title variable and a render object in the context of ssr. Similar to this:
context = {
...
title: 'My Example App',
render: {
meta: function () { ... },
link: function () { ... }
}
}
At this point, we can remodel our templates:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
{{{ && ()}}}
{{{ && ()}}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
This will render the required data. It is worth noting: although we can use it
<template>
...
</template>
<script>
export default {
name: 'async',
metaInfo () {
return {
title:
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
= 'async'
}, 2000)
}
}
</script>
Notice:
This form defines the data, but the final rendered title is still loading, because server rendering does not have mounted hooks except created and beforeCreate.
Summarize
This is the article about vue using vue meta info to set the title and meta information of each page. For more related vue setting page title and meta information, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!