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. MYSQL 5.7 sqlmode 行为

    最近碰到了sql_mode 的一些问题,故进行了研究,根据实际情况研究其行为. sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ER ...

  2. Eclipse 控制台视图和服务器视图中停止Web服务器的差别

    Eclipse 控制台视图和服务器视图中停止Web服务器的差别 (1)console视图里面, "红色方形图标" 是terminate, 也会关闭web服务器!!!!!!!!这个, ...

  3. 转:只能选择GridView中的一个CheckBox(单选CheckBox)

    方法1: protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e){CheckBox cbx = e.R ...

  4. [翻译] GMCPagingScrollView

    GMCPagingScrollView https://github.com/GalacticMegacorp/GMCPagingScrollView GMCPagingScrollView is a ...

  5. 铁乐学python_day05-作业

    1,有如下变量(tu是个元祖),请实现要求的功能 tu = ("alex", [11, 22, {"k1": 'v1', "k2": [&q ...

  6. September 04th 2017 Week 36th Monday

    Try not to become a man of success but rather try to become a man of value. 不要努力去做一个成功的人,而要努力去做一个有价值 ...

  7. YBB.DBUtils用法

    通用数据访问类库,兼容ADO.ADO.NET方式访问. 利用ProviderFactory工厂方法,支持Oracle(不需要安装客户端).SQL Server.OleDb和ODBC等数据库访问. ht ...

  8. 快速搭建一个Express工程骨架

    下载express-generator 通过应用生成器,可以帮我们快速搭建项目需要的骨架.这就需要npm在全局下载express-generator(-g就是在全局安装) npm install ex ...

  9. nginx alias

    A path to the file is constructed by merely adding a URI to the value of the root directive. If a UR ...

  10. Git Hooks、GitLab CI持续集成以及使用Jenkins实现自动化任务

    Git Hooks.GitLab CI持续集成以及使用Jenkins实现自动化任务 前言 在一个共享项目(或者说多人协同开发的项目)的开发过程中,为有效确保团队成员编码风格的统一,确保部署方式的统一, ...