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. Ajax步骤

    var request = new XMLHttpRequest(); request.open("GET","get.php",ture); request. ...

  2. App测试从入门到精通之交叉事件测试

    交叉事件测试又叫事件或者叫冲突测试.对于正在运行的应用,若进入短信,电话等其他软件响应的情况,不会影响所测试应用,且会保证应用都能正确运行.下面我来看一下关于交叉测试中,我们测试人员需要考虑的一些测试 ...

  3. ntroducing K-Pattern: A Rapid Way to Make CRUD Operations with Entity Framework

    Download Source Introduction Earlier in the last year I made a different approach to work on Entity ...

  4. android MVP模式简单介绍

    原文 http://zhengxiaopeng.com/2015/02/06/Android%E4%B8%AD%E7%9A%84MVP/ 前言 MVP作为一种MVC的演化版本在Android开发中受到 ...

  5. 【转载】C# DataGridView 通过代码设置样式

    // 表格上下左右自适应 dataGridView.Anchor = (AnchorStyles.Top | AnchorStyles.Right | AnchorStyles.Bottom | An ...

  6. 【leetcode 144. 二叉树的前序遍历】解题报告

    前往二叉树的:前序,中序,后序 遍历算法 方法一:递归 vector<int> res; vector<int> preorderTraversal(TreeNode* roo ...

  7. ES更改参数max_result_window

    今天开发那边说翻页超过10000报错.早上来查阅官网手册,说from/size默认是10000.通过参数index.max_result_window进行控制.那么直接改这个参数即可. 1.先看看默认 ...

  8. I/O(输入/输出)---File类

    File:表示文件与目录.用它来对文件或目录进行基本操作,它可以查出文件的基本相关信息,比如:名称.最后的修改日期.文件大小. 使用File类操作文件和目录属性步骤: 1.引入File类 import ...

  9. 【智能算法】超详细的遗传算法(Genetic Algorithm)解析和TSP求解代码详解

    喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 文章声明 此文章部分资料和代码整合自网上,来源太多已经无法查明出处,如侵犯您的权利,请联系我删除. 00 目录 遗传算法定义 生 ...

  10. Spring Cloud-服务的注册与发现之服务注册中心(Eureka Server)

    Spring cloud是为了什么产生的? 根据官网的这个介绍来看,我们可以知道,Spring cloud是为开发者提供的一个工具,而使用这个工具的产生就是为了帮助开发者快速的开发一套比较通用的分布式 ...