How to set meta tags dynamically by vue+vue-meta-info

This article mainly explains "how to set meta tags dynamically in vue+vue-meta-info". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "vue+vue-meta-info how to dynamically set meta tags" bar!

When writing mobile projects, meta is usually set to prevent users from zooming.

In recent requirements, individual pages allow users to zoom, so different pages need to be set up with different meta.

But vue is a single-page application, and there is no way to set different headers for each page as it does natively. So we need to use vue-meta-info.

Official introduction of vue-meta-info

Vue-meta-info is a plug-in based on vue 2.0 that allows you to better manage the meta information in your app.

You can set metaInfo directly in the component and you can automatically mount it to your page.

If you need to update your title, meta and other information automatically as the data changes, then this plug-in is perfect.

Of course, sometimes we may encounter troublesome SEO problems, so it is more appropriate to use this plug-in with prerender-spa-plugin

Vue-meta-info official website

Vue-meta-info uses npm install vue-meta-info-- save

Global introduction in main.js

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

Static use within a component

... Export default {metaInfo: {title: 'operation manual', meta: [{name:'viewport', content: 'width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0'}]},}

It should be noted that vue-meta-info does not directly change the meta information of the page, but adds an overlay to the following, as shown in the following figure:

So only set up for one page, it will affect other pages. It needs to be set dynamically according to the route switching. Listen for routing changes in App.vue

Export default {name: "App", metaInfo () {return {meta: this.metaData}}, data () {return {metaData: [{name: 'viewport', content:' width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'}]}} Watch: {$route (to, from) {if (to.name = = 'pdf') {this.metaData = [{name:' viewport', content: 'width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0'}]} else {this.metaData = [{name:' viewport' Content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'}]},},} # app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; color: # 2c3e50;}

If there are too many pages that need to be changed, such as seo, set keywords and description for the page. Can also be configured in router, combined with vuex to set a little more elegant.

At this point, I believe you have a deeper understanding of "how to dynamically set meta tags in vue+vue-meta-info". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!