1、项目中,cmd下 ,运行:cnpm install vue-wechat-title --save

2、在 main.js 中,设置:

import VueWechatTitle from 'vue-wechat-title';

Vue.use(VueWechatTitle)

3、在router / index.js 中,设置:

{
  path: '/Home',
  name: 'Home',
  component: Home,
  meta: {
    title: 'Home'  //此处为要修改的 title 名称,浏览器目前的标题显示:Home
  }
}

4、在app.vue中,添加组件:

<router-view v-wechat-title="$route.meta.title"></router-view>

此上,就可以自动修改浏览器标题了

vue动态修改title的更多相关文章

  1. Vue动态修改网页标题

    业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...

  2. Vue 动态修改data 值 并触发视图更新

    Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新

  3. vue-wechat-title动态修改title

    在使用Vue制作项目的过程中,发现title没有变化 所以使用vue-wechat-title插件动态修改tilte 一.安装 npm vue-wechat-title --save 二.引入和使用 ...

  4. 用document.title=“xxx”动态修改title,在ios的微信下面不生效

    单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title.常规做法如下,可惜在iO ...

  5. 微信小程序动态修改title,动态配置title,动态配置头部,微信小程序动态配置头部

    微信小程序的title是在json里面配置的 "navigationBarTitleText": "title名称" 这种title是固定死的不灵活处理一些页面 ...

  6. 在vue中如何动态修改title标签的值

    建议用vue-wechat-title插件为微信动态设置标题 1,首先安装插件 cnpm install vue-wechat-title --save 2,在main.js中引入 Vue.use(r ...

  7. vue单页面应用中动态修改title

    https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...

  8. vue router 修改title(IOS 下动态改变title失效)

    在ios下app  设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 在路由配置中添加   ...

  9. 用document.title=“xxx”动态修改title,在ios的微信下面不生效的解决办法!

    //需要jQuery var $body = $('body'); document.title = 'title'; // hack在微信等webview中无法修改document.title的情况 ...

随机推荐

  1. leetCode题解之字符最短路径解法2

    1.题目描述 2.分析 之前使用的大循环再向两边寻找的算法是 O(n^2)复杂度的,可以利用 multimap降低其复杂度. 3.代码 vector<int> shortestToChar ...

  2. C# 获取两个时间段之间的所有时间与获取当前时间所在的季度开始和结束时间

    一:C# 获取两个时间段之间的所有时间 public List<string> GetTimeList(string rq1, string rq2) { List<string&g ...

  3. spring配置datasource

    1.使用org.springframework.jdbc.datasource.DriverManagerDataSource  说明:DriverManagerDataSource建立连接是只要有连 ...

  4. 关于解决sql2012编辑器对象名无效问题

    出现以下情况: 解决办法: 选择“编辑”——“Intellisense”——“刷新本地缓存” 或者按Ctrl+Shift+R组合键

  5. Win7系统安装 Photoshop CC 中文完全破解版

    Win7系统安装 Photoshop CC 中文完全破解版 谨以此教程献给某位做UI设计的朋友^_^! 01. 确定自己的系统是32位的还是64位的,本人电脑是64位 02. 将 Photoshop_ ...

  6. JAVA容器全面总结

    1      容器体系图 简图: 详图: 2      基础 2.1      Iterator接口 迭代器. 具有的能力:后向迭代.删除. 2.2      Iterable接口 表示一个类具有迭代 ...

  7. 【2017-11-19】Linux基础知识:TP-Link WN823N无线网卡(RTL8192EU芯片)的X86-64及AARCH64驱动安装

    目的: 使类似于树莓派的AARCH-64架构的嵌入式设备能通过USB无线网卡连接上以太网: 该设备有LAN接口,但在前一次系统固件升级后,其内部的三个网络接口可以相互ping通,但任一接口无法ping ...

  8. [2018HN省队集训D8T3] 水果拼盘

    [2018HN省队集训D8T3] 水果拼盘 题意 给定 \(n\) 个集合, 每个集合包含 \([1,m]\) 中的一些整数, 在这些集合中随机选取 \(k\) 个集合, 求这 \(k\) 个集合的并 ...

  9. 前段js初学总结

    常用的js整理 confirm("此次修改操作会清空所有基础数据!!!您确定要修改吗?") <a onclick="delBasisData('${data['_i ...

  10. Avito Code Challenge 2018

    第一次打CF,很菜,A了三道水题,第四题好像是是数位DP,直接放弃了.rateing从初始的1500变成了1499,还是绿名,这就很尴尬.之后觉得后面的题目也没有想象的那么难(看通过人数)过两天吧剩下 ...