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. (转)Web API 强势入门指南

    原文地址:http://www.cnblogs.com/developersupport/p/aspnet-webapi.html Web API是一个比较宽泛的概念.这里我们提到Web API特指A ...

  2. Android自动提示控件:AutoCompleteTextView和MultiAutoCompleteTextView

    在输入框中输入我们想要输入的信息就会出现其他与其相关的提示信息,这种效果在Android中是用AutoCompleteTextView实现的. 一.AutoCompleteTextView:单一匹配 ...

  3. PrintDocument or PrintPreviewDialog 打印

    /// <summary> /// /// </summary> /// <param name="sender"></param> ...

  4. java实现链式队列

    java实现链式队列...比较简单 package datastruct; public class QueueLink implements Queue { // 定义一个节点内部类 class N ...

  5. 使用Linq读取资源文件

    ResXResourceReader resxr = new ResXResourceReader(txt_WebResourceOpenFile.Text); IEnumerable<Dict ...

  6. vs2010 does not have a strong name

    处理步骤: C:\myWorkSpace\IECG Dev. Tool\Forklift\DbUpgraderDLL\bin\Debug 为dll 所在目录 DbUpgraderDLL.dll为dll ...

  7. 第八篇 Python异常

    程序在运行时,如果Python解释器遇到一个错误,会停止程序的执行,并且提示一些错误信息,这就是异常,程序通知执行并且提示错误信息,这个动作,我们通常称之为:抛出异常. 1.简单的捕获异常的语法 在程 ...

  8. Visual odometry and zed's IMU fusion on RTAB-Map

    "When using /camera/odom, you don't need to use visual_odometry node. rtabmap should be subscri ...

  9. 【转】WinForm时间选择控件(DateTimePicker)如何选择(显示)时分秒

    源地址:https://www.cnblogs.com/EvanFan/p/7826160.html 注意:年月日时分秒的大小写格式,如果错了数据就错了,如果能显示当前时间说明设置正确

  10. HDU6301-2018ACM暑假多校联合训练1004-Distinct Values

    题意是一个长度为n的序列,给你m组区间(l,r),在这个区间里不能填入重复的数字,同时使整个序列字典序最小 同学用的优先队列,标程里使用的是贪心同时使用set维护答案序列 贪心是先采用pre数组来确定 ...