如何动态修改Vue项目中的页面title
需求:修改框中的信息
一、在main.js中:
// 设置浏览器标题
Vue.directive('title', {
inserted: function (el, binding) {
document.title = el.dataset.title
}
})
二、在某个页面最大的div上:
![](http://upload-images.jianshu.io/upload_images/18344853-eda5eebb6b583bb6.png?imageMogr2/auto-orient/strip|imageView2/2/w/1040/format/webp)
image.png
加上以下代码:
v-title data-title="测试title"
效果:
![](http://upload-images.jianshu.io/upload_images/18344853-505dbea702e9ff9a.png?imageMogr2/auto-orient/strip|imageView2/2/w/493/format/webp)
image.png
////////////////////////////////////更简单的方法,一行代码,在页面中直接赋值给document.title
![](http://upload-images.jianshu.io/upload_images/18344853-90d6485cf90b22f6.png?imageMogr2/auto-orient/strip|imageView2/2/w/900/format/webp)
image.png