页面标题

在vue-router页面配置中添加meta的title信息,配合vue-routerbeforeEach注册一个前置守卫用户获取到页面配置的title

const title = '移动端';
export default function getPageTitle (pageTitle) {
    if (pageTitle) {
        return `${pageTitle} - ${title}`
    }
    return `${title}`
}
router.beforeEach((to, from, next) => {
  // set page title
  document.title = getPageTitle(to.meta.title)
}

router

{
            path: '/annunciate',
            name: 'annunciate',
            component: annunciate,
            meta:{
                title: '通告广场'
            }
        },

Vue-cli 项目设置每个页面标题的更多相关文章

  1. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  2. vue.js 使用 vue-router 修改页面标题

    module.exports = { name: 'myComponent', data: {} route{ data: function(){ document.title = "页面标 ...

  3. vue cli 构建的 webpack 项目设置多页面

    1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...

  4. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  5. vue本地项目设置通过手机访问

    最近再用vue写一个移动端的应用,想通过手机访问看看页面效果,于是有了下文. 1.shif+右键打开命令行工具,输入ipconfig,回车,得到电脑的ip 2.找到工作目录下的config文件夹中的i ...

  6. vue cli 项目的提交

    前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...

  7. vue cli 脚手架上多页面开发 支持webpack2.x

    A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改.  项目地址:  ...

  8. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  9. Vue cli项目开启Gzip

    目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本 ...

随机推荐

  1. 定时任务cron表达式解析

    cron表达式2种: Seconds Minutes Hours DayofMonth Month DayofWeek Year或 Seconds Minutes Hours DayofMonth M ...

  2. php输出控制函数和输出函数生成静态页面

    Output Control 函数详解: flush - 刷新输出缓冲 ob_clean - 清空输出缓冲区 ob_end_clean - 清空缓冲区并关闭输出缓冲 ob_end_flush - 冲刷 ...

  3. jacoco + ant远程统计(tomcat/spring boot)服务的代码覆盖率

    什么是Jacoco? Jacoco(java code coverage)是一个开源的Java代码覆盖率工具,Jacoco可以嵌入到Ant .Maven中,并提供了EclEmma Eclipse插件, ...

  4. MySQL体系结构概览

    MySQL体系结构 InnoDB体系结构 MySQL实例有一组后台线程.一些内存块和若干服务线程组成 在默认情况下,MySQL有7组后台线程,分别为1个主线程,4组IO线程,1个锁线程,1个错误监控线 ...

  5. jmeter之登录接口的一次简单压测与分析

    前言:登录接口的一次简单压测与分析 1.接口文档 2.配置元件 3.结果分析 1.接口文档 a.拿到接口文档 接口地址:http://localhost:8080/jpress/admin/login ...

  6. php远程抓取(下载)文件到本项目指定目录中

    function httpcopy($url, $file="", $timeout=60) { $file = empty($file) ? pathinfo($url,PATH ...

  7. 基于vux的Vue路由切换动画

    const history = window.sessionStorage history.clear() let historyCount = history.getItem('count') * ...

  8. [Python3] 024 面向对象 第四弹

    目录 11. 类和对象的三种方法 12. 抽象类 12.1 抽象方法 12.2 抽象类 12.3 抽象类的使用 13. 自定义类 接上一篇 [Python3] 023 面向对象 第三弹 11. 类和对 ...

  9. Mysql 在 select 查询时追加(添加)一个字段并指定值

    在特定时候,在 mysql 的查询结果中我们需要追加一个字段来实现某些特定的功能,这时我们可以用到以下语法来实现 值 as 字段比如我们需要给这个查询结果追加一个 xx 字段并赋值为 null ,可以 ...

  10. Codeforces - 1176E - Cover it! - bfs

    https://codeforc.es/contest/1176/problem/E 久了不写bfs了.一开始用dfs写,的确用dfs是很有问题的,一些奇怪的情况就会导致多染一些色. 注意无向图的边要 ...