追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


vue单页面标题设置 title

2019-8-9 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

推荐使用 vue-wechat-title

vue-wechat-title作用
Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)

已测试APP 
微信 
QQ 
支付宝 
淘宝

安装
npm install vue-wechat-title --save
1
用法
1,在 main.js 中引入
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
1
2
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 !重启看看

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: vue单页面标题设置 title « 当我们在谈 SaaS 的时候,在谈什么? | 如何通过体验设计赋能产品增长—阅读产品案例分享»


订阅Rss