1. 首页
2. Vue
3. 本页

修改Vue项目的title显示

https://blog.csdn.net/gqzydh/article/details/81539253

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>

• 1

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

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

• 1

ok ！重启看看