快捷導(dǎo)航

vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽的方法

更新時(shí)間：2022年11月18日 14:46:37 作者：喜葵

這篇文章主要介紹了vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽,實(shí)現(xiàn)思路非常簡(jiǎn)單內(nèi)容包括mata標(biāo)簽的特點(diǎn)和mata標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性，本文通過實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下

一. meta標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)(元數(shù)據(jù)指用來描述數(shù)據(jù)的數(shù)據(jù))。

元數(shù)據(jù)不會(huì)顯示在頁面上，但是對(duì)于機(jī)器是可讀的。它可用于瀏覽器(如何顯示內(nèi)容或從新加載頁面)、搜索引擎(關(guān)鍵詞搜索)、或其他web服務(wù)。

二.meta標(biāo)簽的特點(diǎn)

meta標(biāo)簽只能位于head元素內(nèi)部。
在html中，meta標(biāo)簽沒有結(jié)束標(biāo)簽。在xhtml中，meta標(biāo)簽必須被正確地關(guān)閉。
meta標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性。

三.通過引入vue-meta模塊

npm install vue-meta --save

在main.js中引入

import  Meta from 'vue-meta';
Vue.use(Meta);

new Vue({
    router,
    data:{
        title:"張培躍",
        keywords:"玉樹臨風(fēng),風(fēng)流倜儻,英俊瀟灑,才高八斗,貌似番安",
        description:"這么神奇嗎？都已經(jīng)很難用言語來描述了"
    },
    metaInfo(){
        return {
            title: this.title,
            meta: [
                {
                    name:"keywords",
                    content: this.keywords
                },{
                    name:"description",
                    content: this.description
                }
            ]
        }
    },
    render: function (h) { return h(App) }
}).$mount('#app')

四.vue路由中動(dòng)態(tài)設(shè)置title與meta

在router.js中創(chuàng)建路由：

routes:[
{
    name:"Qq",
    path:"/qq",
    component:Qq，
    meta：{
        metaInfo：{
            title:"騰訊首頁",
             keywords: "資訊,新聞,財(cái)經(jīng),房產(chǎn),視頻,NBA,科技,騰訊網(wǎng),騰訊,QQ,Tencent",
             description: "騰訊網(wǎng)從2003年創(chuàng)立至今，已經(jīng)成為集新聞信息……"
        }
    }
},
{
    path: "/jd",
        name: "Jd",
        component: Jd,
        meta: {
            metaInfo: {
                title: "京東(JD.COM)-正品低價(jià)、品質(zhì)保障、配送及時(shí)、輕松購物！",
                keywords: "網(wǎng)上購物,網(wǎng)上商城,家電,手機(jī),電腦,服裝,居家,母嬰,美妝,個(gè)護(hù),食品,生鮮,京東",
                description: "京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城，……"
            }
        }
 
 
}
]

在store.js中創(chuàng)建狀態(tài)：

import Vue from "vue";
import vuex from "vuex";
Vue.use(vuex);
const state = {
    metaInfo: {
        title: "張培躍",
        keywords: "玉樹臨風(fēng),風(fēng)流倜儻,英俊瀟灑,才高八斗,貌似番安",
        description: "這么神奇嗎？都已經(jīng)很難用言語來描述了"
    }
};
const mutations = {
    CAHNGE_META_INFO(state, metaInfo) {
        state.metaInfo = metaInfo;
    }
};
export default new vuex.Store({
    state,
    mutations,
})

main.js

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

到此這篇關(guān)于vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽的文章就介紹到這了,更多相關(guān)vue meta標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: