vue 项目动态title的渲染问题

vue种动态渲染方式有多种，但是各有个的优缺点，要根据项目来确定使用哪一种。

1、用vue-wechat-title插件

由于做的大多数项目是微信的，所以很多时候直接会想到用vue-wechat-title插件

1. 安装插件 npm install vue-wechat-title --save
   或者直接在package.json中添加
   

2. 引用 在main.js中引用
   

3. 路由文件中写好title
   

4. 在router-view 中使用 <router-view v-wechat-title="$route.meta.title" />
   
   但是,这个插件有时会有bug,在项目中如果监听路由并存储到本地,会有问题,每次切换、刷新页面的时候都会出现加载多次的情况。
   这个错误这篇博客有详细说明 https://blog.csdn.net/SnowBeatRain/article/details/82711964
   所以基于这种情况这个实现动态title的方式就不是很完美。

2、利用路由的导购守卫beforeEach在每次页面跳转前更改对应的title

1. 路由文件写好title
   

2. 在main.js里面加上导航守卫
   
   但是这个在某些情况下也有缺陷
   在app内嵌h5的混合应用中，iOS系统下部分APP的webview中的标题不能通过 document.title = xxx 的方式修改，原因是在IOS webview中网页标题只加载一次，动态改变是无效的。