vue单页面标题设置 title

前端框架如Vue、React等都是单页面的应用，整个web站点其实是一个index页面，页面跳转都是替换index.html里边的内容。这与传统的每个页面设置title标签的做法不一样。

推荐使用 vue-wechat-title

vue-wechat-title作用

Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)

已测试APP

微信

QQ

支付宝

淘宝

安装

npm install vue-wechat-title --save

用法

1，在main.js中引入

import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)

2，在路由文件index.js中给每个路由添加title

// 挂载路由const router = new Router({mode: 'history',routes:[{path: '/',name: 'Index',component: Index,meta: {title: '首页' // 标题设置}},{path: '/lists',name: 'Lists',component: Lists,meta: {title: '列表' // 标题设置}}]});

3，在app.vue中修改router-view组件

<router-view v-wechat-title='$route.meta.title'></router-view>

自定义加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的

<div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>

ok ！重启看看