vue3中vue-meta怎么使用

这篇文章主要介绍了vue3中Vue-meta怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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 = falsenew 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怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。