方法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. JavaWeb 11_jsp九大内置对象

    1. out: 输出对象,向客户端输出内容2. request: 请求对象;存储"客户端向服务端发送的请求信息" request对象的常见方法: String getParamet ...

  2. Linux不常用参数（持续更新）

    一.系统级别 1.1 > 使其他机器无法ping通你的主机 echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all---------------- ...

  3. 使用gdb

    1.设置断点,在源程序第16 行处 (gdb)break 16 Breakpoint 1 at 0x8048496: file tst.c, line 16. 2.设置断点,在函数func()入口处. ...

  4. P5017 [NOIP2018 普及组] 摆渡车

    P5017 [NOIP2018 普及组] 摆渡车 题目 P5017 思路 将实际问题抽象后,不难发现这是一个 区间 \(DP\) 我们不妨认为时间是一条数轴,每名同学按照到达时刻分别对应数轴上可能重合 ...

  5. 一个Spring的应用看起来象什么？

    一个定义了一些功能的接口. 这实现包括属性,它的Setter , getter 方法和函数等. Spring AOP. Spring 的XML 配置文件. 使用以上功能的客户端程序.

  6. jvm-learning-运行时数据区-整体

    在jdk8之后之前的方法区有叫做元数据. 每个JVM只有一个Runtime实例,即为运行时环境,相当于内存结构种的运行时数据区 线程 线程是一个程序里的运行单元,JVM允许一个应用有多个线程并行的执行 ...

  7. 如何实现数组与List的相互转换？在 Queue 中 poll()和 remove()有什么区别？哪些集合类是线程安全的？

    如何实现数组与List的相互转换? List转数组:toArray(arraylist.size()方法 数组转List:Arrays的asList(a)方法 /** * 〈一句话功能简述〉; * 〈 ...

  8. synchronized 和 ReentrantLock 的区别？

    synchronized 是和 if.else.for.while 一样的关键字,ReentrantLock 是类, 这是二者的本质区别.既然 ReentrantLock 是类,那么它就提供了比 sy ...

  9. 学习GlusterFS（二）

    环境准备 3台机器,每个机器双网卡,每个机器还需要额外添加1个10GB的磁盘用于测试 机器系统版本是centos6.6 1 2 3 4 5 [root@gluster-1-1 ~]# uname -r ...

  10. js技术之转换为大写toUpperCase()

    案例:把所有单词以空格为分割并将首字母转为大写 <!DOCTYPE html><html lang="en"><head> <meta c ...