this.$route.meta.title不生效

2024-09-03

聊聊 Vue 中 title 的动态修改

由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一直是万年不变的 vue-project.理所应当的,这个问题被测试爸爸提了一个大大的缺陷. 犯了错的我赶紧解决这个问题,但是经过一段时间的摸索,我却发现,这一个小小的问题,却有着很多不同的解法. 首先,毫无疑问的是,我们应该使用 document.title 方法通过 DOM 操作来修改 title

挖坑指南：iView-admin动态配置route.meta.title

原文链接前言新的项目,基于iView-admin.结合自身的项目需求,对官方的模板进行一些修改.以达到动态修改route.meta,并同步更新面包屑导航文字和标签页标题. 开始如果你还未使用过iView-admin或者正在上路,那我们先来看看项目的需求以及遇到的问题. 那应该如何解决这个问题呢? 实践方法一:一开始想到的方法,就是在新建页面的created()中,通过this.$route.params的不同参数判断当前是何种操作,根据判断修改this.$route.meta.title

html之head,base,meta,title

一个简单的HTML最基本的必须的元素用于定义文档的头部,是所有头部元素的容器.头部描述了文档的各种属性和信息,绝大多数头部的数据都不会直接显示给读者. 下面这些标签可用在head部分:base,link,meta,script,style,title head标签支持html中的全局属性 1.base 全局属性所有浏览器都支持,为页面上的所有链接规定默认地址或目标,设置了base url之后,浏览器会使用基地址url来填充所有的相对url,包括的标签有a , link ,img ,form

HTML基础之HTML标签-html header（meta,title） html body(p,br,h,form,div,span,input,lable)

摘自:http://www.imdsx.cn/index.php/2017/07/27/html0/ 一.HTML标签 <!DOCTYPE html>  <html lang="en">  <head>  <meta charset="UTF

关于 this.$route.meta.operations.includes('delete') 取不到值的问题

原因是:src/mock/api/sys.login.js中定义的路径要与src/router/modules/下定义的路由要一致作用this.$route.matched可以查看匹配信息来自为知笔记(Wiz)

vue router 修改title（IOS 下动态改变title失效）

在ios下app 设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 在路由配置中添加 meta对象如: 在路由配置js里面添以下代码 router.afterEach(route => { // 从路由的元信息中获取 title 属性 if (route.meta.title) { document.title = route.meta.title; // 如果是 iOS 设备,则使用

vue2 设置网页title的问题

好东东,没个标题看着多难受看到1文章 http://blog.csdn.net/qishuixian/article/details/72912368 推荐使用 vue-wechat-title插件 npm install vue-wechat-title --save 下看后我的使用方式 1. 在 main.js 中 import VueWechatTitle from 'vue-wechat-title'; Vue.use(VueWechatTitle) 这样就能用了 2. 路由中加

vue动态修改title

1.项目中,cmd下 ,运行:cnpm install vue-wechat-title --save 2.在 main.js 中,设置: import VueWechatTitle from 'vue-wechat-title'; Vue.use(VueWechatTitle) 3.在router / index.js 中,设置: { path: '/Home', name: 'Home', component: Home, meta: { title: 'Home' //此处为要修改的 t

vue设置title和ioc图标

vue设置ioc图标和title 1.ioc图标设置在根目录中的index.html中引入代码: <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" rel="external nofollow" /> 2.title设置首先在根目录中的index.html中加入代码: <title>标题</title>

vue动态设置页面title方法

第一种方法 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 在router的index.js的路由中加上参数 { path: '/login', component: Login, meta: { title: '登录' } } 如果是公共组件,在跳转时根据条件来动态设置title,可以在最

vue项目设置每个页面的title

1.在项目目录下安装vue-wechat-title 2.在main.js中使用vue-wechat-title 3.在router的配置中设置 4.在每个vue页面中加入 <div v-wechat-title="$route.meta.title"></div>

vue单页面应用中动态修改title

https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-weachat-title 解决问题: 1.Vuejs 单页应用在iOS系统下部分APP的webview中标题不能通过 document.title = xxx 的方式修改该插件只为解决该问题而生(兼容安卓) 2.在vue单页面中,通过浏览器分享到QQ.微信等应用中的链接,只有一个首页标题和默认ico

vue-wechat-title动态修改title

在使用Vue制作项目的过程中,发现title没有变化所以使用vue-wechat-title插件动态修改tilte 一.安装 npm vue-wechat-title --save 二.引入和使用三.路由配置中设置meta:{ title : title名 } 四.在App.vue文件中使用 <div v-wechat-title="$route.meta.title"> 或 <router-view v-wechat-title="$route.met

vue 项目路由跳转后显示不同的title

1.在router/index.js的每个路由中配置title 2.在项目中运行命令 npm install vue-wechat-title --save 安装插件(在 package.json文件的dependencies中可以看到已安装 "vue-wechat-title": "^2.0.5") 3.在main.js 中引入并使用 import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTi

vue 工作学习总结

配置ESlint yarn 初始化 yarn init yes 添加依赖 yarn add [package] 升级依赖 yarn upgrade [package] 移出依赖 yarn remove [package] npm npm i npm init --yes npm i gulp-pug gulp-debug gulp-sass //生产依赖 npm i gulp -P //开发依赖 npm i gulp -D //不添加到package.json npm i gulp --no-s

vue-cli3.x中的webpack配置，优化及多页面应用开发

官方文档 vue-cli3以下版本中,关于webpack的一些配置都在config目录文件中,可是vue-cli3以上版本中,没有了config目录,那该怎么配置webpack呢? 3.x初始化项目后没有了build和config文件,如果你想对webpack相关内容进行配置,需要自己在根目录下(与package.json同级)创建一个vue.config.js文件,这个文件一旦存在,那么它会被 @vue/cli-service 自动加载.(但需要我们自己手动创建哦vue.config.js,跟

vue-router 通过路由来实现切换头部标题

在做单页面应用程序时,一般页面布局头尾两块都是固定在布局页面,中间为是路由入口.这时访问页面时头部标题不会变,该问题的解决方案如下: 通过采用组件内路由卫士(beforeRouterEnter.beforeRouterUpdate)与路由元信息(meta) 来实现更新头部标题信息.点击查看文档 beforeRouterEnter:第一次进入时调用. beforeRouterUpdate:重复使用当前组件时调用. 效果图如下: 注意看页面标题与图标变换路由元信息(meta)配置在路由元信息中配

vue项目中遇到的那些事。

前言有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + element-ui + vue-baidu-map + i18n + vue-awesome-swiper 做项目时总是有一些思考和踩过的坑,对以后有一定的帮助,今天就来写写做vue项目遇到的那些事. 假如你正准

移动端最强适配（rem适配之px2rem）&& 移动端结合Vuex实现简单loading加载效果

一.rem之px2rem适配前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 viewport --> 百分比 --> rem --> rem的升级版px2rem可谓是一把鼻涕一把泪啊 ,在px2rem之前总觉得之前的不够完美或者麻烦: 进入正题: 首先 px2rem 也是基于 rem 适配的,但是他的好用之处在于灵活.简便.高效不用我们自己去换算.px2rem-load

vue-manage-system 后台管理系统开发总结

前言 vue-manage-system,一个基于 Vue.js 和 element-ui 的后台管理系统模板,从2016年年底第一个commit,到现在差不多两年了,GitHub上也有了 5k star,也是这些让我有了持续更新的动力,其中也踩了很多坑,在这总结一下. github地址:vue-manage-system 线上地址:blog.gdfengshuo.com/example/work/ 自定义图标 element-ui 自带的字体图标比较少,而且许多比较常见的都没有,因此需要自己引

this.$route.meta.title不生效

热门专题