动态设置html的title

最新推荐文章于 2025-05-06 08:14:03 发布

转载最新推荐文章于 2025-05-06 08:14:03 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016801359

文章标签：

#java #javascript #前端框架 #ViewUI

本文介绍了在Vue.js中动态设置网页标题的三种方法：使用自定义指令、直接操作DOM和结合路由元信息。通过这些技巧，开发者可以轻松地根据页面内容更新浏览器标签页的标题。

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

使用vue前端框架做，竟然丢弃了很多javascript和html的东西了。。
动态设置title的方法：

1.使用vue的自定义指令

<div v-title>{{htmltitle}}</div>
...
directives: {
  title: {
      inserted: function (el, binding) {
          document.title = el.innerText
          el.remove()
      }
  }
}

2.很简单

// 设置html title
document.title = sessionStorage.getItem('title')

3.router路由不同的title

...
routes: [
        {
            path: '/index',
            name: 'index',
            component: index,
            meta:{
                title:'首页'
            }
        },
        {
            path: '/user',
            name: 'user',
            component: user,
            meta:{
                title:'个人中心'
            }
        }
    ]
...
router.beforeEach((to, from, next) => {
    if (to.meta.title) {
        document.title = to.meta.title
    }
    next()
})

2018-10-25
完。