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. PHP中循环结构之foreach循环语句

    在PHP中foreach循环语句,常用于遍历数组,一般有两种使用方式:不取下标.取下标. (1)只取值,不取下标 <?php foreach (数组 as 值){ //执行的任务 } ?> ...

  2. Linq学习<二>

    http://www.cnblogs.com/wyqlijin/archive/2011/02/25/1964934.html 这位仁兄写的比较高深,建议大家看看 一: 这一篇以一个数据类为例,操作数 ...

  3. URAL 1204. Idempotents (扩展欧几里得)

    题目链接 题意 : 给你一个同余方程, x*x ≡ x  (mod n),让你求出所有的小于n的x. 思路 : 先来看同余的概念 :给定一个正整数m,如果两个整数a和b满足a-b能被m整除,即m|(a ...

  4. 编写高质量代码改善C#程序的157个建议——建议6: 区别readonly和const的使用方法

    建议6: 区别readonly和const的使用方法 很多初学者分不清readonly和const的使用场合.在我看来,要使用const的理由只有一个,那就是效率.但是,在大部分应用情况下, “效率” ...

  5. C# PDF、winform 生成解析二维码

    PDF 生成.解析二维码 界面样式: 第一步:下载ThoughtWorks.QRCode.dll 类并引用 地址  http://download.csdn.net/detail/liwb1987/8 ...

  6. Sqoop 遇到的问题

    1.   想用 sqoop 增量的方式导入到 hive.运行下面的命令: sqoop import --connect jdbc:mysql://192.168.7.159:3306/test --u ...

  7. pycharm自动调整html页面代码缩进不正确的解决办法

    pycharm自动调整html页面代码缩进不正确的解决办法

  8. maven项目运行找不到类的错误

    Maven项目 eclipse工具 错误: [INFO] -------------------------------------------------------------[ERROR] CO ...

  9. zip与unzip

  10. springboot配置文件的所有属性

    转载:https://blog.csdn.net/qq_28929589/article/details/79439795 # spring boot application.properties配置 ...