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

最新推荐文章于 2025-03-19 17:24:12 发布

即墨丹青

最新推荐文章于 2025-03-19 17:24:12 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_26282869/article/details/98845175

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

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

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 == '斗麦科技'){
                this.viewId = 1;
            }else if(to.meta.title == '英树系统'){
                this.viewId = 2;