方法1. 在需要的组件或者页面内设置 document.title = response.data.res.title

方法2.

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>基础入门</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <script src="../vue2.1.3.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css">

        div {

            margin: 10px 0;

        }

    </style>

</head>

<body>

    <div v-title>标题内容</div>

</body>

<script type="text/javascript">

    Vue.directive('title', {

        inserted: function(el, binding) {

            document.title = el.innerText

            el.remove()

        }

    })

</script>

方法3.  router 里用导航修改

// 导航守卫
router.beforeEach((to, from, next) => {
  console.log('to', to)
  console.log('topath', to.path)
  console.log('to.meta.title', to.meta.title)
  if(to.path == "/auth") {
    document.title = to.meta.title || '渠道授权' // 当前想修改页面的标题
  } else document.title = 'CPS流量变现后台管理系统'  // 默认标题
  next()
});

vue 修改单页标题 --- document.title的更多相关文章

  1. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  2. [vue]spa单页开发及vue-router基础

    - 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...

  3. 如何动态修改网页的标题（title）？

    有时候我们需要复用一个页面,但是又希望他们拥有各自的标题,这时候就需要动态的去更改页面的title了,不然所有页面都是一个标题. 这时候就会想到使用js或jQuery去实现了. 1.js方式. 首先, ...

  4. 使用Vue构建单页应用一

    一. 环境准备 1 安装Node.js  最好安装node.js-6.X.X 以上版本,https://nodejs.org/en/    我使用的是  v6.3.1 Current 版本.Node. ...

  5. 一套Vue的单页模板：N3-admin

    趁着周末偷来一点闲,总结近期的工作和学习,想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下. 首发于个人博客:blog.lxstart.net项目路径: ...

  6. Vue 部署单页应用，刷新页面 404/502 报错

    在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...

  7. vue实现单页应用demo

    vue + webpack +ES6/7 + axiso + vuex + vue-router构建项目前端,node + express + mongodb 开发后台 项目demo地址 https: ...

  8. vue项目单页

    <template> <div> <div v-if="type === 'A'">A</div> <div v-else-i ...

  9. vue单页应用前进刷新后退不刷新方案探讨

    引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...

随机推荐

  1. 如何运行MATLAB和C++混合编程

    在GitHub下载了一个大佬的滤波器程序,包含MATLAB和C++,刚开始直接运行,发现提示如下: 然后,第一步:点击截图访问后面的链接,跳转到如下截图: 第二步:点击上面截图的左下角,R2015b版 ...

  2. JNDI With RMI

    JNDI With RMI JNDI with RMI JNDI即Java Naming and Directory Interface(JAVA命名和目录接口),jndi类似于一个索引中心,允许客户 ...

  3. 关于List、Set、Map接口讲解

    概述 List.Set接口都是继承于Collection主接口,而Map为独立接口 1.List接口下有ArrayList.Vector.LinkedList实现类 2.Set接口下有HashSet. ...

  4. 羽夏看Win系统内核——内存管理篇

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...

  5. SpringDataRedis的Keyspaces设置

    前言 原文:https://docs.spring.io/spring-data/redis/docs/2.3.2.RELEASE/reference/html/#redis.repositories ...

  6. Qt的.pro文件格式解析

    Qt的.pro文件格式解析 在Qt中用qmake生成makefile文件,它是由.pro文件生成而来的,.pro文件的具体格式语法如下: 1.注释 .pro文件中注释采用#号,从"#&quo ...

  7. MM32F0140 UART1硬件自动波特率校准功能的使用

    目录: 1.MM32F0140简介 2.UART自动波特率校准应用场景 3.MM32F0140 UART自动波特率校准原理简介 4.MM32F0140 UART1 NVIC硬件自动波特率配置以及初始化 ...

  8. java模板设计

  9. scanf()函数的原理

    最近使用scanf发现了自己对scanf函数还是不太了解,主要出现在无意中出现的一个错误: scanf正确的写法是,scanf中以什么格式输入变量,则变量的类型就应该是什么格式,如下面scanf输入到 ...

  10. C语言泛型编程——泛型冒泡排序

    在实际编程中,常常会需要一些方法(函数),比如排序,它们具体实现基本一致,仅仅只有参数类型不同, 那么可不可以有一种通用的函数,不管是什么类型的参数都可以通用呢? 泛型编程:泛型即是指具有在多种数据类 ...