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的详细内容。