vue3中vue-meta的使用方法解析
vue-meta的使用方法
meta標簽用於設置HTML的元數據(描述數據的數據),該數據不會顯示在頁面中,主要用於瀏覽器(如和現實內容或重新加載頁面)、搜索引擎(如SEO)及其他web服務
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結合使用
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相關字段
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 }); //每次路由更新前,設置當前頁面的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有以下特點
- 在組件內設置 metaInfo,便可輕松實現頭部標簽的管理
- metaInfo 的數據都是響應的,如果數據變化,頭部信息會自動更新
- 支持 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' } },
可以看一下頁面顯示
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vue利用vue meta info設置每個頁面的title與meta信息
- Vue router 路由守衛詳解
- 手把手教你vue實現動態路由
- vue3中使用router4 keepalive的問題
- vue3緩存頁面keep-alive及路由統一處理詳解