1. 首页
  2. 教程哟

修改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 !重启看看

[打赏一下]
  • 版权声明:本文基于《知识共享署名-相同方式共享 3.0 中国大陆许可协议》发布,转载请遵循本协议
  • 文章链接:https://www.imiowo.cn/678.html [复制] (转载时请注明本文出处及文章链接)
上一篇:
:下一篇
今天又是荒废的一天。

作者:洛斯

洛斯
介绍:大西瓜

文章:50篇

最后更新:21-01-31

发表评论

gravatar

当前页面评论被关闭,原因如下: