前端框架如
Vue、React
等都是单页面的应用,整个web站点其实是一个index页面,页面跳转都是替换index.html里边的内容。这与传统的每个页面设置title标签的做法不一样。
推荐使用 vue-wechat-title
vue-wechat-title作用
Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)
已测试APP
微信
支付宝
淘宝
安装
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 !重启看看