vue 全局配置seo(title，keywords关键词，description描述）

最新推荐文章于 2023-08-17 15:58:06 发布

即墨丹青

最新推荐文章于 2023-08-17 15:58:06 发布

阅读量2.9k

点赞数 1

分类专栏： vue 文章标签： vue keywords description title 动态设置

本文链接：https://blog.csdn.net/qq_26282869/article/details/98845175

版权

本文介绍了如何在Vue.js项目中进行全局SEO优化，包括动态设置title、keywords和description，以提升网页在搜索引擎中的表现。

摘要由CSDN通过智能技术生成

1.router文件夹下index.js中设置title

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { title: '首页' }
    },
    {
      path: '/design',
      name: 'design',
      component: design,
      meta: { title: '网站设计' }
    },
    {
      path: '/shopping',
      name: 'shopping',
      component: shopping,
      meta: { title: '商城系统' }
    }
  ]
})

2.main.js中调用seo接口，并设置每个页面的title,关键词，描述

new Vue({
      el: '#app',
      render: h => h(App),
      router,
      components: { App },
      template: '<App/>',
    data: {
        keywords: "",
        description: "",
        title: "",
        viewId: 1
    },
    created() {
          this.getSEO();
          // 全局配置
        router.beforeEach((to, from, next) => {
            // Change doc title
            if(to.meta.title