基于Vue的SPA动态修改页面title的方法
本篇文章主要介绍了基于Vue的SPA动态修改页面title的方法，旨在解决SPA应用中动态修改页面标题的问题。
在SPA应用中，动态修改页面标题是一个常见的需求，例如在websocket的页面中，收到消息时需要动态显示页面标题。然而，直接使用document.title=xxxx来修改页面标题在IOS的微信端会失效。因此，我们需要找到其他的解决方案。
第一种方法是使用App.Vue中的title属性，然后在页面中绑定标题。缺点是App.Vue默认的el只是body的一个DIV，这样需要绑定整个html。我们可以使用自定义指令来实现此功能，例如：
```
Vue.directive('title', {
inserted: function (el, binding) {
document.title = el.innerText
el.remove()
}
})
```
调用方法：<div v-title>标题内容</div>
优点是自定义程度较高，但缺点是无法满足某些JS方法中修改页面标题的需求。
第二种方法是使用隐藏的Iframe来修改页面标题。网上有几种方案，例如创建一个隐藏的Iframe，然后加载一个图片文件，加载完成后移除Iframe。这样可以修改页面标题。
第三种方法是使用Vue的插件来实现SPA的页面标题修改。我们可以创建一个插件，例如：
```
var plugin = {};
plugin.install = function (Vue, options) {
Vue.prototype.$title = function (title) {
document.title = title;
var iframe = document.createElement("iframe");
iframe.style.display = 'none';
iframe.setAttribute('src', '/e.png');
var loadedCallback = () => {
iframe.removeEventListener('load', loadedCallback);
document.body.removeChild(iframe);
};
iframe.addEventListener('load', loadedCallback);
document.body.appendChild(iframe);
};
};
module.exports = plugin;
```
调用方法：this.$title('xxxxxx'); 当然你可以替换为一个绑定的变量，然后watch进行实时调整。
第四种方法是使用vue-wechat-title插件。我们可以使用npm install vue-wechat-title安装插件，然后在组件中添加一段代码：<div v-wechat-title="$route.meta.title"></div>。这样可以实现改变title效果。
我们可以使用多种方法来实现SPA应用中动态修改页面标题，选择合适的方法取决于具体的需求和场景。
