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

Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新

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

//index.js routes: [ { name:'home', path: '/home/:openname', component: Home, meta: { title: '首页' } } ] //main.js router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title; } next(); })

业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 结合业务直接在Vue生命周期函数 created 和 mounted 中,给 document.title赋值. <script> import axios from 'axios' export default {   created () {     document.title = '功能授

script标签依据浏览框的失焦获焦进行函数操作(操作简单放到HTML文件下的head标签下就可以) <script> window.onfocus = function () { document.title = '恢复正常了,嘻嘻~'; }; window.onblur = function () { document.title = '快回来~页面崩溃了'; }; </script>

#####对象方法-最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染) :class="{ 'active': isActive }"1判断是否绑定一个active:class="{'active':isActive==-1}" 或者:class="{'active':isActive==index}"123绑定并判断多个第一种(用逗号隔开):class="{ 'active': isActive, 'sort':

<div v-for="i in resultDate" v-if="i.ProjectId>='4'" @click=EveyTesttInfo(i.Name,i.ProjectId)> <img v-bind:src="i.ProjectId | formatIconImg"> <p>{{i.Name}}<br> {{i.Result|formatNull}} {{i.ProjectId|

action是一个必填参数,且其类型为string,我们把action写成:action,然后后面跟着一个方法名,调用方法,返回你想要的地址,代码示例: //html 代码 <el-upload :action="UploadUrl()" :on-success="UploadSuccess" :file-list="fileList"> <el-button size="small" type="

JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示． 平时使用JS修改title,直接document.title=新标题就好了 这样在安卓的微信浏览器是正常运行,可在iOS中这样的确不起作用.微信浏览器的title在页面加载完成后就确定了,因此如果光使用document.title来修改,不会有效果.所以这里使用了黑科技.在微信浏览器中使用如下代码来动态修改浏览器上的title标题: var $body = $('body');

最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一个隐藏的Iframe,然后随便加载一个图片文件,然后加载完成移除,这样就能修改页面title了.网上有几种方案: 1,App.Vue里面设置title属性,然后页面title去绑定,所有子组件修改标题就通过 this.$root.data.title=xxxxx;去修改 缺点:App.Vue默认的e

第一种方法 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,可以在最

0. 直接上 预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h5的sessionStorage和localStorage也可以存在这里面) ( 3 ) 设置 title (1)从路由router里面得到组件的title 在 router.beforeEach((to, from, next) => {} 里面 const browserHeaderTitle

嘛,起因是黑子大叔在微博上的一条@信息,找起了这个的实现,看了一圈google的中文信息内似乎还没有怎么提到这个的内容,就发表上来. 详细效果就是类似于用Firefox4+/Chrome 5+/Safari 5+/Opera 11.5+登录新浪微博后看到的个人时间轴,在翻页时可以观察到这个效果,地址栏URL变动,但是页面没有刷新,用firebug观察也观察不到刷新整个页面,只有ajax请求的翻页数据.从先前的理解来说,URL的修改必然引起(请注意我不是在说通过锚点修改)浏览器重载页面,但利用HT

最近遇到了在不刷新页面的情况下修改浏览器url链接的需求,遂求助于万能的度娘,最终通过history.pushState()完美解决问题.现在将我理解的一些内容分享一下,不对的地方欢迎大家指出. 在使用方法前首先需要了解它的兼容性,history.pushState()存在一定的兼容性问题,下图展示了部分浏览器的兼容情况,当然也可以通过 https://caniuse.com/#search=pushState 查看支持的浏览器版本. 简单介绍一下方法的相关信息: history.pushSta

方法很简单:相信大家的问题应该是改变src的值吧,动态赋值这一步简单.this.playerOptions['sources'][0]['src'] 就是这一步解决提取src问题,主要部分用绿色框起来了. playerOptions 参数是一个字典对吧!修改字典中的值怎么做不用多说吧直接赋值就好了,下面方法 的重点就是取出src参数进行赋值. 你们视频的url从数据库通过动态获取过来的时候,直接赋值给这个字典中的src就行了,赋值方法:this.playerOptions['sources'][

在使用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

微信小程序是可以动态修改页面标题的. 首先我们来看看静态是怎么实现的 在对应页面的json文件里面加入下面代码就可以实现了 { "navigationBarTitleText": "素材图库" } 效果图如下: 其他动态的也是十分简单,毕竟是提供好了的接口,我们调用一下就行了.接口嘛,那就要操作对应的js文件咯.参考地址 quwei: function () { wx.setNavigationBarTitle({ title: '趣味表情' }) } 点击的时候触

1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js   image.png 2 .修改固定头部Header和侧边栏 Logo:   image.png 1)侧边栏文件在:\src\layout\components\Sidebar\index.vue, Sidebar组件中   image.png 2)修改侧边栏Log和标题在文件:src\layout\components\Sidebar\Logo.vue   image.png 3) 控制showLogo字

首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body