vuejs怎么设置title

PHP中文网 • 2025年3月13日 05:28:59 • 编程技术 • 阅读 2

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: '列表'  // 标题设置          }        }     ]});

登录后复制