Vue-cli 项目设置每个页面标题
页面标题
在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 项目设置每个页面标题的更多相关文章
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- vue.js 使用 vue-router 修改页面标题
module.exports = { name: 'myComponent', data: {} route{ data: function(){ document.title = "页面标 ...
- vue cli 构建的 webpack 项目设置多页面
1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- vue本地项目设置通过手机访问
最近再用vue写一个移动端的应用,想通过手机访问看看页面效果,于是有了下文. 1.shif+右键打开命令行工具,输入ipconfig,回车,得到电脑的ip 2.找到工作目录下的config文件夹中的i ...
- vue cli 项目的提交
前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...
- vue cli 脚手架上多页面开发 支持webpack2.x
A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改. 项目地址: ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- Vue cli项目开启Gzip
目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本 ...
随机推荐
- 当执行一条查询语句时,MySQL内部经历了什么?
假如说我们有一张表 T ,表里只有一个字段 ID,当我们执行下边这条SQL语句时: mysql> select * fron T where ID=10; 在我们眼中能看到的只是输入一条 SQL ...
- inline-block的间隙问题 box-orient属性 line-clamp属性 margin问题
只要设了 display:inline-block 将元素变成行级块元素的时候,会自带空隙,即使你设了 margin 和 padding 依然没有效果! 解决办法:只要在父元素上加上font-size ...
- Mongodb日常管理
用户管理: MongoDB Enterprise > db.version()3.4.10 1.创建超级管理员:MongoDB Enterprise > use admin MongoDB ...
- 网路编程之socket与 socketserver、黏包
socket与socketerver才是我们学习python中网络编程的重中之重在介绍他们两个之前我先介绍一些相关知识 一.socket 概念 咱们现在ois模型中找到socket所承担的角色 soc ...
- java切分查询数据库表
在实际应用中,我经常用到遇到根据单号查询,单号又是批量如1000个单号,直接1000个in子查询是不行的,子查询是用上限的.如果表中数据达到上百万以上.即使有单号字段有索引查询也是很慢.这时可以用切分 ...
- 【转载】Spring boot学习记录(三)-启动原理解析
前言:本系列文章非本人原创,转自:http://tengj.top/2017/04/24/springboot0/ 正文 我们开发任何一个Spring Boot项目,都会用到如下的启动类 @Sprin ...
- vue+element-ui国际化(i18n)
1. 下载element-ui和vue-i18n: npm i element-ui --save npm i vue-i18n –save 2. 创建一个 i18n 文件夹, 在main.j ...
- 合并石子(区间DP)
有N堆石子,现要将石子有序的合并成一堆,规定如下:每次只能移动相邻的2堆石子合并,合并花费为新合成的一堆石子的数量.求将这N堆石子合并成一堆的总花费最小. 区间DP思想:现在小区间进行DP得到最优解, ...
- HNCPC2019部分题解
ProblemSet 签到题就不写了. C. Distinct Substrings 先对原串建出SAM,map存边. 由于这题相当于添加一个字符再删除这个字符,添加下一个字符,所以每次都暴力跳后缀链 ...
- Java程序流程控制
程序流程控制有 选择,循环,以及跳转结构 选择结构中无非就是 If 和 switch语句我两种都做了一些小案例 1. 利用Scanner库来获得控制台用户输入的数字与代码中定义的变量比较 packag ...