vue中动态设置meta标签和title标签

最新推荐文章于 2025-06-18 16:19:36 发布

原创最新推荐文章于 2025-06-18 16:19:36 发布 · 5.6k 阅读

2 ·

CC 4.0 BY-SA版权

本文探讨了在前端项目中如何利用路由的元信息进行页面标题和meta标签的动态设置，通过具体代码示例展示了如何在路由变化时更新页面的meta信息和标题。

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

//router内的设置
{
      path: '/teachers',
      name: 'TDetail',
      component: TDetail,
      meta: {
        title:"教师详情",
        content: 'disable'
      }
    },
    {
      path: '/article',
      name: 'Article',
      component: Article,
      meta: {
        title: "文章详情",
        content: 'disable-no'
      }
    },
  //main.js里面的代码
  router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面meta */
  if(to.meta.content){
    let head = document.getElementsByTagName('head');
    let meta = document.createElement('meta');
    meta.content = to.meta.content;
    head[0].appendChild(meta)
  }
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next()
});