精选文章 动态设置html的title

动态设置html的title

作者:我爱丁丁猫 时间: 2021-04-08 01:05:41
我爱丁丁猫 2021-04-08 01:05:41
【摘要】
                    
                        
                    
                    使用vue前端框架做,竟然丢弃了很多javascript和html的东西了。。动态设置title的方法: 
1.使用vue的自定义指令 

<div v-title>{{htmltitle}}</di...

使用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()
})

原文地址:https://segmentfault.com/a/1190000016801359


更多专业前端知识,请上 【猿2048】www.mk2048.com
勿删,copyright占位
您找到想要的结果了吗?
动态设置html的title
提交成功!非常感谢您的反馈,我们会继续努力做到更好
分享文章到微博
分享文章到朋友圈

上一篇:flex与java通信的小例子

下一篇:SNS网站建设策划书

您可能感兴趣

CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。
动态设置html的title介绍:华为云为您免费提供动态设置html的title在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多动态设置html的title的相关内容。| 移动地址: 动态设置html的title | 写博客