方法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. SpringBoot 中实现跨域的几种方式

    一.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. ...

  2. Mybatis使用注解开发(未完)

    使用注解来映射简单语句会使代码显得更加简洁,但对于稍微复杂一点的语句,Java 注解不仅力不从心 注解在接口实现 @Select("SELECT * FROM user") Lis ...

  3. C++设计模式 - 访问器模式（Visitor）

    行为变化模式 在组件的构建过程中,组件行为的变化经常导致组件本身剧烈的变化."行为变化" 模式将组件的行为和组件本身进行解耦,从而支持组件行为的变化,实现两者之间的松耦合. 典型模 ...

  4. 22.1.22 并查集和KMP算法

    22.1.22 并查集和KMP算法 1.并查集结构 1)实现: 并查集有多种实现方式,例如向上指的图的方式,数组的方式等等.其根本思想就在于准确记录某个节点的根节点,这个这种记录就能够很快的实现并查集 ...

  5. callbale 和runnable 区别

    Callable接口: 1 2 3 public interface Callable<V> {     V call() throws Exception; } Runnable接口: ...

  6. mysql join 底层原理

    你知道 Sql 中 left join 的底层原理吗? 2019-09-10阅读 7130 https://cloud.tencent.com/developer/column/2367   01.前 ...

  7. Spring @Configuration继承

    Bean定义继承 Bean定义可以包含许多配置信息,包括构造函数参数,属性值和特定于容器的信息,例如初始化方法,静态工厂方法名称等.子bean定义从父定义继承配置数据.子定义可以覆盖某些值或根据需要添 ...

  8. IOC 的优点是什么？

    IOC 或 依赖注入把应用的代码量降到最低.它使应用容易测试,单元测试不再需 要单例和 JNDI 查找机制.最小的代价和最小的侵入性使松散耦合得以实现.IOC 容器支持加载服务时的饿汉式初始化和懒加载 ...

  9. centos 7环境下安装jdk

    在此之前已经安装了xshell并能传输文件. 1.下载对应版本的jdk:jdk-8u191-linux-x64.tar.gz 2.上传到centos的目录下 3.解压jdk的gz包,命令: tar - ...

  10. 学习GlusterFS（三）

    glusterfs,GNU cluster file system,创始人Anand Babu Periasamy,目标:代替开源Lustre和商业产品GPFS,glusterfs是什么: cloud ...