Vue-meta

最新推荐文章于 2025-06-10 09:02:41 发布

kiz_calamus

最新推荐文章于 2025-06-10 09:02:41 发布

阅读量528

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/kids_calamus/article/details/102994218

本文详细介绍了Vue-meta插件的安装、注册及使用方法，包括在组件和路由配置中如何设置元信息，如标题、关键词和描述，以优化网页SEO。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好久没更博客了，随便写点记录下防止忘记吧。具体内容看官网吧
Vue-meta的使用

下载安装

install vue-meta

main.js 中注册


import Vue from 'vue' import VueRouter from 'vue-router' import VueMeta from 'vue-meta'  Vue.use(VueRouter)

Vue.use(VueMeta, {
  keyName: 'metaInfo',
  refreshOnceOnNavigation: true
});

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

使用方法

组件中使用


export default {

　　name: "about",
　　metaInfo(){
        return {
            title: this.title,
            meta: [
                {
                    name:"keywords",
                    content: '213213'
                },{
                    name:"description",
                    content: '213213'
                }
            ]
        }
    },

}

路由配置中使用

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/home",
    name: "home",
    component: Home
  },
  {
    path: "/about",
    name: "about",   component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
     meta: {
     metaInfo: {
     title: "腾讯首页",
     keywords: "资讯,新闻,财经,房产,视频,NBA,科技,腾讯网,腾讯,QQ,Tencent",
             description: "腾讯网从2003年创立至今，已经成为集新闻信息……"

         }
    }
  }
];