router > index.js

        {
path: '/worklist',
name: 'worklist',
component: worklist,
meta: {title:'维修工列表',keyword:'success-list',description:'维修工列表'},
},

main.js

router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})

VUE-CLI 设置页面title的更多相关文章

  1. vue动态设置页面title方法

    第一种方法 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wech ...

  2. 单页应用动态设置页面title

    1.适用场景:所有通过router路由的单页应用. 2.示例代码:本文以vue-router为例. 在router.js中: let router = new Router({ routes: [ { ...

  3. VUE修改每个页面title

    //index.js routes: [ { name:'home', path: '/home/:openname', component: Home, meta: { title: '首页' } ...

  4. 8.0 vue cli自定义页面

    1.新建a.html(public文件夹下)文件,并设定div的id="a" <!DOCTYPE html> <html lang=""> ...

  5. 用vue实现登录页面

    vue和mui一起完成登录页面(在hbuilder编辑器) <!DOCTYPE html> <html> <head> <meta charset=" ...

  6. 基于Vue的SPA动态修改页面title的方法

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...

  7. 046——VUE中组件之使用动态组件灵活设置页面布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。

    场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...

  9. 从0开始,手把手教你用Vue开发一个答题App01之项目创建及答题设置页面开发

    项目演示 项目演示 项目源码 项目源码 教程说明 本教程适合对Vue基础知识有一点了解,但不懂得综合运用,还未曾使用Vue从头开发过一个小型App的读者.本教程不对所有的Vue知识点进行讲解,而是手把 ...

随机推荐

  1. Appium混合应用测试

    Appium测试混合应用 混合应用即是原生应用中间混着html页面,需要在两种类型的页面之间跳转. 测试Android混合应用 前期设置 4.4以下版本使用automationName:Selendr ...

  2. 扫描工具——Meterpreter

    Meterpreter是Metasploit框架中的一个杀手锏,通常作为利用漏洞后的攻击载荷所使用,攻击载荷在触发漏洞后能够返回给用户一个控制通道.当使用Armitage.MSFCLI或MSFCONS ...

  3. Bitmap类、BitmapFactory及BitmapFactory类中的常用方法

    1.Bitmap 1.1非静态方法 public void recycle()——回收位图占用的内存空间,把位图标记为Dead public final boolean isRecycled() —— ...

  4. delphi json用法

    用法:uses Superobject, Sperjsondelphi里有json单元. procedure TForm2.SuperObjectClick(Sender: TObject); var ...

  5. 【大数据之数据仓库】安装部署GreenPlum集群

    本篇将向大家介绍如何快捷的安装部署GreenPlum测试集群,大家可以跟着我一块儿实践一把^_^ 1.主机资源 申请2台网易云主机,操作系统必须是RedHat或者CentOS,配置尽量高一点.如果是s ...

  6. 【大数据之数据仓库】GreenPlum优化器对比测试

    在< [大数据之数据仓库]选型流水记>一文中有提及,当时没有测试GreenPlum的quicklz压缩算法和ORCA查询优化器,考虑到quicklz压缩算法因为版权问题不会开源(详情请参阅 ...

  7. django开发日志配置

    做django开发离不开 日志,这用于保存我门的服务器的日志信息,便于开发人员的维护. 直接上代码: 在setting.py文件里直接配置即可 LOGGING = { 'version': 1, 'd ...

  8. CPU 的工作原理

    内部架构 CPU 的根本任务就是执行指令,对计算机来说最终都是一串由 0 和 1 组成的序列.CPU 从逻辑上可以划分成 3 个模块,分别是控制单元.运算单元和存储单元 .其内部架构如下: [1]控制 ...

  9. form表单提交回调函数

    form表单没有回调函数,不过可以通过jquery-form.js这个插件来实现回调函数: <form id="addform" class="form-horiz ...

  10. 18、OpenCV Python 简单实现一个图片生成(类似抖音生成字母人像)

    __author__ = "WSX" import cv2 as cv import numpy as np def local_threshold(img): #局部阈值 gra ...