广东IT优就业

VUE 中各个组件添加标题

在微信服务号中嵌套第三方页面，技术选的是vue，因为vue的特性，页面与页面之间是通过路由的改变来请求ajax的，所以，浏览器是不会产生刷新行为的，所以，在“不同的页面”之间添加不同的标题也是一个问题，在网上查阅了些资料后，发现问题确实是可以解决的。

主要思路：

在网上查阅了很多资料后发现，主要思路是通过路由的改变，在路由配置里添加不同路由页面的meta属性：

在 router 中设置完成以后还需要在router.beforeEach()中设置document.title:

这样大概的样式就可以出来了！但是这种效果只是适用于固定的标题，如果需要根据目标路由页面设置不同的标题的话，这样做就不能满足要求了，这是就需要借助于网上封装的设置微信标题的方法：(setWechatTitle):具体代码如下：

将当前代码引入到要设置标题的目标路由组件中

并在created中调用该方法：

这里的“this.bookInfo.title”是通过vue-resource发送请求获取到的，这里我用假数据代替的（公司后台还没有生成接口文档），这样，当前的“this.bookInfo.title”就成为了当前组件的标题，而且标题会随着title的改变而改变。

更多IT精彩推荐：

Web前端工程师是怎样练成的？

http://www.ujiuye.com/zt/webqianduan/?wt.mc_id=17009338

广东IT优就业