vue-meta implements the method of router to dynamically set meta tags

1. The meta tag provides metadata about HTML documents (metadata refers to the data used to describe the data).

The metadata will not be displayed on the page, but is readable to the machine. It can be used in browsers (how to display content or load a page from a new load), search engines (keyword search), or other web services.

2. Characteristics of meta tags

The meta tag can only be located inside the head element.
In html, the meta tag has no end tag. In xhtml, the meta tag must be closed correctly.
There are two attributes in the meta tag, name attribute, name attribute.

3. By introducing vue-meta module

npm install vue-meta --save

Introduced in

import  Meta from 'vue-meta';
(Meta);

new Vue({
    router,
    data:{
        title:"Zhang Peiyue",
        keywords:"The elegant and elegant, handsome, talented, and seemingly peaceful",
        description:"Is it so magical? It's hard to describe it in words."
    },
    metaInfo(){
        return {
            title: ,
            meta: [
                {
                    name:"keywords",
                    content: 
                },{
                    name:"description",
                    content: 
                }
            ]
        }
    },
    render: function (h) { return h(App) }
}).$mount('#app')

Set title and meta dynamically in 4.vue routes

Create a route in:

routes:[
{
    name:"Qq",
    path:"/qq",
    component:Qq，
    meta：{
        metaInfo：{
            title:"Tencent Home",
             keywords: "Information, News, Finance, Real Estate, Video, NBA, Technology, Tencent, Tencent, QQ, Tencent",
             description: "Tencent.com has become a collection of news information since its establishment in 2003..."
        }
    }
},
{
    path: "/jd",
        name: "Jd",
        component: Jd,
        meta: {
            metaInfo: {
                title: "JD.com()-Authentic low price、Quality Assurance、Timely delivery、Easy shopping！",
                keywords: "Online shopping,Online Mall,Home appliances,cell phone,computer,clothing,Stay at home,Mother and baby,Beauty makeup,Personal protection,food,Fresh,JD.com",
                description: "JD.com-专业的综合Online shopping商城，……"
            }
        }
 
 
}
]

Create a state in:

import Vue from "vue";
import vuex from "vuex";
(vuex);
const state = {
    metaInfo: {
        title: "Zhang Peiyue",
        keywords: "The elegant and elegant, handsome, talented, and seemingly peaceful",
        description: "Is it so magical? It's hard to describe it in words."
    }
};
const mutations = {
    CAHNGE_META_INFO(state, metaInfo) {
         = metaInfo;
    }
};
export default new ({
    state,
    mutations,
})

import Vue from 'vue'
import App from './'
import router from './router'
import Meta from 'vue-meta'
import store from './store'
 
(Meta)
 
 = false;
 
((to, from, next) => {
    if ()
        ("CAHNGE_META_INFO", )
    next()
});
 
new Vue({
    router,
    store,
    metaInfo(){
        return {
            title: this.$,
            meta: [
                {
                    name: "keywords",
                    content: this.$
                }, {
                    name: "description",
                    content: this.$
                }
            ]
        }
    },
    render: function (h) {
        return h(App)
    }
}).$mount('#app')

This is the article about the dynamic setting of meta tags for vue-meta implementation router. For more related vue meta tag content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!