動態設置html的title
阿新 • • 發佈:2018-11-03
next amp 自定義指令 tps mov https bin UNC 設置
使用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
動態設置html的title