this.$route.meta.title 可以直接修改么

2024-10-13

聊聊 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

用document.title=“xxx”动态修改title，在ios的微信下面不生效

单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title.常规做法如下,可惜在iOS微信浏览器无效. 问题原因: 因为微信浏览器首次加载页面初始化title后,就再也不监听 document.title的change事件. 解决方案: 修改title之后,给页面加上一个内容为空的iframe,随后立即删除这个iframe,这时候会刷新title.但是如果简单的这样设置,一般是会有

用document.title=“xxx”动态修改title，在ios的微信下面不生效的解决办法！

//需要jQuery var $body = $('body'); document.title = 'title'; // hack在微信等webview中无法修改document.title的情况 var $iframe = $('<iframe src="/favicon.ico"></iframe>'); $iframe.on('load',function() { setTimeout(function() { $iframe.off('load').

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

a 标签中 title 属性样式修改

无文字描述,直接上测试页,看效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <style> #tplink{border:

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

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

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

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 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和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-router设置每个页面的title

进入 router 文件夹底下的index.js文件首先引入: import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由的地址: routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, { /* 修改昵称 */ path: '/modifyName/:nickNa

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

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以及打包问题

做这个项目用的是vue+element UI来实现的响应式布局,现主要说一下国际化这块的实现. 第一步:新建文件夹i18n 第二步:配置cn.js.en.js等文件内容 cn.js import enLocale from 'element-ui/lib/locale/lang/zh-CN' const cn = { message: { 'mes': '你好', }, ...enLocale } export default cn; en.js import enLocale from 'el

this.$route.meta.title 可以直接修改么

热门专题