vue3中vue-meta怎么使用

這篇文章主要介紹了vue3中vue-meta怎么使用的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue3中vue-meta怎么使用文章都會有所收獲，下面我們一起來看看吧。

vue-meta的使用方法

meta標(biāo)簽用于設(shè)置HTML的元數(shù)據(jù)（描述數(shù)據(jù)的數(shù)據(jù)），該數(shù)據(jù)不會顯示在頁面中，主要用于瀏覽器（如和現(xiàn)實內(nèi)容或重新加載頁面）、搜索引擎（如SEO）及其他web服務(wù)

1.安裝

npm install vue-meat -S

2.一般使用方法

在main.js中使用

import Meta from 'vue-meta';
Vue.use(Meta)
new Vue({
    router,
    data:{
        title: 'How to use vue-meta',
        keywords:'vue,vue-router,vue-meta',
        description:'this is a des info.'
    },
    //定義metaInfo
    metaInfo(){
        return(){
            title: this.title,
                meta:[
                    {
                        name:'keywords',
                        content:this.keywords
                    },{
                        name:"description",
                        content:this.description
                    }
                ]
        }
    },
    render: h=>(APP)
}).$mount('#app')

3.與vuex,vue-route結(jié)合使用

a.在router.js路由中添加meta信息

import Vue from "Vue";
import VueRouter from "vue-router";
Vue.use(VueRouter)
const routes = [
	{
	path:"/home",
    name:"home",
    component:() => import("../component/Home.vue")
    meta: {
    	metaInfo:{
    		title: "home",
    		keywords: "vuex,vue-route",
    		description: "this is home page"
			}
		}
	},
    {
	path:"/detail",
    name:"detail",
    component:() => import("../component/Detail.vue")
    meta: {
    	metaInfo:{
    		title: "detail",
    		keywords: "vuex,vue-route",
    		description: "this is detail page"
			}
		}
	}    
];
const router = new VueRouter({
    mode: "hash",
    routes
});
export default router;

b.store.js中添加meta相關(guān)字段

import Vue from "Vue"
import Vuex from "vuex"
Vue.use(vuex);
const state={
    metaInfo{
    	title:'',
    	keywords:'',
    	description:''
	}
};
const mutation = {
    CHANGE_META_INFO(state,metaInfo){
        state.metaInfo = metaInfo;
    }
}
export default new vuex.Store({
    state,
    mutation
})

c.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,{
    refreshOnceOnNavigation:true
});
//每次路由更新前，設(shè)置當(dāng)前頁面的meta信息
router.beforeEach((to, from, next) => {
  debugger
  if (to.meta.metaInfo) {
    store.commit("CHANGE_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: h => h(App)
}).$mount("#app");

使用vue-meta處理元信息

vue-meta有以下特點

• 在組件內(nèi)設(shè)置 metaInfo，便可輕松實現(xiàn)頭部標(biāo)簽的管理

• metaInfo 的數(shù)據(jù)都是響應(yīng)的，如果數(shù)據(jù)變化，頭部信息會自動更新

• 支持 SSR

如何使用

安裝：$ npm install vue-meta --save，

在入口文件中引入代碼如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
 
  refreshOnceOnNavigation: true
})
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在這里引入后use.use該插件，

在組件中定義metaInfo對象代碼如下：

<template>
  <div class="hello">
    helloword
  </div>
</template>

<script>
export default {
  metaInfo: {
    title: 'My Example App',
    titleTemplate: '%s - Yay!',
    htmlAttrs: {
      lang: 'en',
      amp: true
    }
  },
  name: 'HelloWorld',
  props:['id'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },

可以看一下頁面顯示

關(guān)于“vue3中vue-meta怎么使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“vue3中vue-meta怎么使用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。