方法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. 阿里云ECS服务器（G5）安装配置docker

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 前言 服务器配置:阿里云ECS服务器(G5服务器3年2核8G内存80G云盘),安装的是CentOS,内核信息:5.10.60-9.al8.x86_ ...

  2. Docker重要容器命令

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 容器重要命令 启动守护式容器 docker run -d 镜像 docker run -d image [command][arg...] 使用c ...

  3. 装饰器property的简单运用

    property函数:在类中使用,将类中的方法伪装成一个属性 使用方法:在函数,方法,类的上面一行直接@装饰器的名字 装饰器的分类: 装饰器函数 装饰器方法:property 装饰类 class St ...

  4. CVE-2017-12615漏洞复现附EXP

    CVE-2017-12615复现 0x00 漏洞介绍 漏洞编号: CVE-2017-12615 CVE-2017-12616 漏洞名称: CVE-2017-12615-远程代码执行漏洞 CVE-201 ...

  5. Golang 包了解以及程序的执行

    Golang 包了解以及程序的执行 引言  Go 语言是使用包来组织源代码的,包(package)是多个 Go 源码的集合,是一种高级的代码复用方案.Go 语言中为我们提供了很多内置包,如 fmt.o ...

  6. RenderDoc图形调试器详细使用教程(基于DirectX11)

    前言 由于最近Visual Studio的图形调试器老是抽风,不得不寻找一个替代品了. 对于图形程序开发者来说,学会使用RenderDoc图形调试器可以帮助你全面了解渲染管线绑定的资源和运行状态,从而 ...

  7. Linux部署Nacos

    此处演示Nacos在Linux(CentOS7)环境中单机版部署,此处演示1.3.0版本. 一.官网下载压缩包 https://github.com/alibaba/nacos/releases 二. ...

  8. Java 建造者Builder

    import java.util.ArrayList; import java.util.List; import java.util.function.Consumer; import java.u ...

  9. dp求最长递增子序列并输出

    1 import java.util.ArrayList; 2 import java.util.Arrays; 3 import java.util.List; 4 5 /** 6 * Create ...

  10. scrapy框架初识及使用

    一.什么是Scrapy? Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,非常出名,非常强悍.所谓的框架就是一个已经被集成了各种功能(高性能异步下载,队列,分布式,解析,持久化等) ...