脚本宝典收集整理的这篇文章主要介绍了vuejs怎么设置title，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

vuejs设置tITle的方法：1、通过npm install安装“vue-wechat-title”；2、在main.js中引入“vue-wechat-title”；3、在index.js中给每个路由添加title即可。

本文操作环境：windows7系统、Vue2.9.6版、Dell G3电脑。

vuejs怎么设置title？

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 可以是相对或者绝对的

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

ok ！重启看看

推荐学习：《vue教程》

以上就是vuejs怎么设置title的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的vuejs怎么设置title全部内容，希望文章能够帮你解决vuejs怎么设置title所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。