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 !重启看看
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注天达云行业资讯频道,感谢您对天达云的支持。