Vue-meta

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

好久没更博客了，随便写点记录下防止忘记吧。具体内容看官网吧
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年创立至今，已经成为集新闻信息……"
         }
    }
  }
];

​

以上是 Vue-meta 的全部内容， 来源链接： utcz.com/z/374765.html

回到顶部