vue动态给网站每个页面添加title 关键词 描述方法

kingLeft7IP属地: 香港
字数 20阅读 1,333

1.在路由里面title 关键词 描述

// 路由懒加载
const _import = file => () => import('@/views/' + file + '/index.vue')

const routes = [
  {
    path: '/',
    name: 'home',
    component: _import('home'),
    meta:{
      title:'专业灵活用工_大数据智能匹配共享经济平台-钇活儿',
      content:{
        keywords:'钇活儿用工,灵活用工,税收优惠,共享经济,劳务派遣,钇活儿',
        description:'钇活儿为企业提供灵活用工、税收优惠、共享经济、劳务派遣等解决方案。钇活儿SaaS级、PaaS级灵活用工管理平台通过整合“人才”和“企业”双方的供求关系,让人才可以足不出户就业,也为企业解决了灵活用工面临的法律风险。'
      }
    }
  },
  {
    path: '/product',
    name: 'product',
    component: _import('product'),
    meta:{
      title:'钇活儿为企业提供灵活用工、税收优惠、共享经济、劳务派遣等解决方案。钇活儿SaaS级、PaaS级灵活用工管理平台通过整合“人才”和“企业”双方的供求关系,让人才可以足不出户就业,也为企业解决了灵活用工面临的法律风险。',
      content:{
        keywords:'钇活儿为企业提供灵活用工、税收优惠、共享经济、劳务派遣等解决方案。钇活儿SaaS级、PaaS级灵活用工管理平台通过整合“人才”和“企业”双方的供求关系,让人才可以足不出户就业,也为企业解决了灵活用工面临的法律风险。',
        description:'钇活儿为企业提供报酬代发、企业降本增效、个体经营个税等解决方案。钇活儿SaaS级、PaaS级灵活用工管理平台通过整合“人才”和“企业”双方的供求关系,让人才可以足不出户就业,也为企业解决了灵活用工面临的法律风险。'
      }
    }
  },
  {
    path: '/solution',
    name: 'solution',
    component: _import('solution'),
    meta:{
      title:'众包模式_共享经济用工模式-钇活儿',
      content:{
        keywords:'众包模式,共享经济用工模式',
        description:'钇活儿为企业提供众包模式,共享经济用工模式等解决方案。钇活儿SaaS级、PaaS级灵活用工管理平台通过整合“人才”和“企业”双方的供求关系,让人才可以足不出户就业,也为企业解决了灵活用工面临的法律风险。'
      }
    }
  },
  {
    path: '/about',
    name: 'about',
    component: _import('about'),
    meta:{
      title:'关于钇活儿-钇活儿靠谱吗-钇活儿',
      content:{
        keywords:'关于钇活儿-钇活儿靠谱吗-钇活儿',
        description:'钇活儿为企业提供优质的灵活用工解决方案。钇活儿SaaS级、PaaS级灵活用工管理平台通过整合“人才”和“企业”双方的供求关系,让人才可以足不出户就业,也为企业解决了灵活用工面临的法律风险。'
      }
    }
  }
]

2.在main.js用beforeEach判断

//前置守卫
router.beforeEach((to, from, next) => {
    if (to.meta.content) {
        let head = document.getElementsByTagName('head');
        let meta = document.createElement('meta');
        document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.content.keywords)
        document.querySelector('meta[name="description"]').setAttribute('content', to.meta.content.description)
        meta.content = to.meta.content;
        head[0].appendChild(meta)
    }
    if (to.meta.title) {
        document.title = to.meta.title;
    }
    next()
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
0人点赞
更多精彩内容,就在简书APP
"小礼物走一走,来简书关注我"
还没有人赞赏,支持一下
kingLeft7难入我心
总资产2共写了4373字获得18个赞共7个粉丝

推荐阅读更多精彩内容