vue项目前端知识点整理【收藏】

微信授权后还能通过浏览器返回键回到授权页

在导航守卫中可以在 next({}) 中设置 replace: true 来重定向到改路由，跟 router.replace() 相同

router.beforeEach((to, from, next) => { if (getToken()) { ... } else { // 储存进来的地址，供授权后跳回 setUrl(to.fullPath) next({ path: '/author', replace: true }) }})

路由切换时页面不会自动回到顶部

const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { return new Promise((resolve, reject) => {  setTimeout(() => {  resolve({ x: 0, y: 0 })  }, 0) }) }})

ios系统在微信浏览器input失去焦点后页面不会自动回弹

初始的解决方案是input上绑定 onblur 事件，缺点是要绑定多次，且有的input存在于第三方组件中，无法绑定事件。

后来的解决方案是全局绑定 focusin 事件，因为 focusin 事件可以冒泡，被最外层的body捕获。

util.wxNoScroll = function() { let myFunction let isWXAndIos = isWeiXinAndIos() if (isWXAndIos) {  document.body.addEventListener('focusin', () => {   clearTimeout(myFunction)  })  document.body.addEventListener('focusout', () => {   clearTimeout(myFunction)   myFunction = setTimeout(function() {    window.scrollTo({top: 0, left: 0, behavior: 'smooth'})   }, 200)  }) }  function isWeiXinAndIos () {  let ua = '' + window.navigator.userAgent.toLowerCase()  let isWeixin = /MicroMessenger/i.test(ua)  let isIos = //(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua)  return isWeixin && isIos }}

在子组件中修改父组件传递的值时会报错

vue中的props是单向绑定的，但如果props的类型为数组或者对象时，在子组件内部改变props的值控制台不会警告。因为数组或对象是地址引用，但官方不建议在子组件内改变父组件的值，这违反了vue中props单向绑定的思想。所以需要在改变props值的时候使用 $emit ，更简单的方法是使用 .sync 修饰符。

// 在子组件中this.$emit('update:title', newTitle)//在父组件中<text-document :title.sync="doc.title"></text-document>使用微信JS-SDK上传图片接口的处理

首先调用 wx.chooseImage() ，引导用户拍照或从手机相册中选图。成功会拿到图片的 localId ，再调用 wx.uploadImage() 将本地图片暂存到微信服务器上并返回图片的服务器端ID，再请求后端的上传接口最后拿到图片的服务器地址。

chooseImage(photoMustTake) { return new Promise(resolve => {  var sourceType = (photoMustTake && photoMustTake == 1) ? ['camera'] : ['album', 'camera']  wx.chooseImage({   count: 1, // 默认9   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有   sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有   success: function (res) {    // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片    wx.uploadImage({     localId: res.localIds[0],     isShowProgressTips: 1,     success: function (upRes) {      const formdata={mediaId:upRes.serverId}      uploadImageByWx(qs.stringify(formdata)).then(osRes => {       resolve(osRes.data)      })     },     fail: function (res) {     // alert(JSON.stringify(res));     }    });   }  }); })}