vue浏览器标题

第一步：在main.js里面添加一个全局指令

 

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})

第二步：在要调用的组件里面，随便找一个div加入如下代码

 

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

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

 

ok ！重启看看

转载于:https://www.cnblogs.com/chengyalin/p/9522720.html