页面标题

在vue-router页面配置中添加meta的title信息,配合vue-router的beforeEach注册一个前置守卫用户获取到页面配置的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. Python基础学习:operator模块

    operator——函数的标准操作 转自:https://blog.csdn.net/zhtysw/article/details/80510113 代码资源:Lib/operator.py oper ...

  2. Delphi Canvas的FillRect(const Rect: TRect) 函数的作用

    http://blog.163.com/zhangzhifeng688@126/blog/static/165262758201131211341460/ Delphi Canvas的FillRect ...

  3. Linux运维工程师需掌握的技能

    笔者是运维工程师,对Linux方面有点心得,现在说一下需要掌握哪方面的工具吧.说到工具,在行外可以说是技能,在行内我们一般称之为工具,就是运维必须要掌握的工具.我就大概列出这几方面,这样入门就基本没有 ...

  4. 表单组件中state依赖props

    参阅避免派生状态的博文: https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

  5. Learning OSG programing---Multi Camera in Multi window 在多窗口中创建多相机

    这个例子演示了在多个窗口中创建多个相机,函数的代码如下: void multiWindowMultipleCameras(osgViewer::Viewer& viewer,bool mult ...

  6. app自动化appium使用内置adb命令

    一.Appium-server使用 1.登陆页面 高级设置:可以设置Android 和 IOS 日志级别:dabug非常详尽的日志 记录python代码向他发送的请求以及他在收到请求后做的一系列处理 ...

  7. flex布局相关用法

    /* pages/classic/classic.wxss */ .chunk { /* 行内元素可设置但是设置了flex,无效了 *//* display: inline-block; */ wid ...

  8. 《JAVA设计模式》之备忘录模式(Memento)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述备忘录(Memento)模式的: 备忘录模式又叫做快照模式(Snapshot Pattern)或Token模式,是对象的行为模式. 备忘录 ...

  9. activity知识点

    一:activity的理解 1.活动:四大应用组件之一 2.作用:提供能让用户操作并与之交互的界面 3.组件的特点: 它的类必须实现特定接口或继承特定类 需要在配置文件中配置全类名 它的对象不是通过n ...

  10. P2634 [国家集训队]聪聪可可(题解)(点分治)

    P2634 [国家集训队]聪聪可可(题解)(点分治) 洛谷题目 #include<iostream> #include<cstdlib> #include<cstdio& ...