这篇文章主要介绍了vue3中vue-meta怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3中vue-meta怎么使用文章都会有所收获，下面我们一起来看看吧。
meta标签用于设置HTML的元数据（描述数据的数据），该数据不会显示在页面中，主要用于浏览器（如和现实内容或重新加载页面）、搜索引擎（如SEO）及其他web服务
npm install vue-meat -S
在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')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");在组件内设置 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'
}
},可以看一下页面显示
关于“vue3中vue-meta怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue3中vue-meta怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
