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:
|
<<: W3C Tutorial (1): Understanding W3C
>>: Understanding the CSS transform-origin property
Recommend
Sharing an idea of building a master-slave system for a large MySQL database
This week has been as busy as a war. I feel like ...
A brief introduction to mysql mycat middleware
1. What is mycat A completely open source large d...
Analysis of the situation where js determines and informs the support of CSS attributes (values)
When we want to use a new CSS feature, we always ...
Detailed explanation of fuser command usage in Linux
describe: fuser can show which program is current...
Introduction to keyword design methods in web design
Many times, we ignore the setting of the web page ...
How to convert a string into a number in JavaScript
Table of contents 1.parseInt(string, radix) 2. Nu...
Parent-child component communication in Vue and using sync to synchronize parent-child component data
Table of contents Preface Child components pass d...
Implementation example of Nginx+Tomcat load balancing cluster
Table of contents introduction 1. Case Overview 2...
Nodejs converts JSON string into JSON object error solution
How to convert a JSON string into a JSON object? ...
CSS animation combined with SVG to create energy flow effect
The final effect is as follows: The animation is ...
Two ways to visualize ClickHouse data using Apache Superset
Apache Superset is a powerful BI tool that provid...
What should I do if I can't view the source file of a web page?
Q: Whether using Outlook or IE, when you right-cl...
How to use webpack and rollup to package component libraries
Preface I made a loading style component before. ...
How to install and deploy gitlab server on centos7
I am using centos 7 64bit system here. I have tri...
Detailed explanation of zabbix executing scripts or instructions on remote hosts
Scenario Requirements 1. We can use the script fu...