vue单页缓存存在的问题及解决方案(小结)

1.css同名覆盖,解决方法：父组件加上scoped

?

1 2 3

<style lang= "scss" scoped>   @import './unbind.scss' </style>

子组件同名样式加上deep

前端精品教程：百度网盘下载

?

1 2 3 4 5 6 7 8

/deep/ .tabs-row {   .items-wrp{    padding-left : . 34 rem;   }   .item {    margin : 0 . 12 rem . 16 rem 0 ;   } }

2.事件全局绑定

绑在window或document或body上的事件，切换到下一个页面同样会被触发，需要销毁，也防止内存泄漏,全局绑定的事件如果是公用组件慎用off().on(),因为可能引用的其他的组件全局绑定的事件被移除

destroyed：返回的时候会触发，防止返回到上一页时window上scroll被触发，官网上是推荐在beforeDestroy做事件移除或者新增DOM或移动DOM操作

deactivated：前进到新页面时会触发，防止进入下一页时window上scroll被触发

activated：被缓存的页面激活，即返回时被触发，created此时不会被触发，重新绑定事件

前端精品教程：百度网盘下载

?

1 2 3 4 5 6 7 8 9 10

activated () {   // 不直接绑定scroll，此处有限制   this .bindEvent() }, destroyed () {   $(window).off( 'scroll' , this .handleScrollFn) }, deactivated () {   $(window).off( 'scroll' , this .handleScrollFn) },

3.音频续播

当音频在还在播放时，跳转到新的页面，此时音频仍在播放，解决方法：前进到新页面会触发deactivated钩子，此时暂停音频播放

?

1 2 3 4 5 6 7 8 9

deactivated () {    // 前进时暂停音频播放    this .pauseAudio()   }, methods: {    pauseAudio () {     this .$refs.audioPlayer && this .$refs.audioPlayer.togglePlay()    } }

当音频在还在播放时，返回上一页，此时音频仍在播放，解决方法：返回会触发destroyed钩子里边关闭音频播放器

?

1 2 3 4 5 6 7 8 9 10 11 12 13

destroyed () {    this .closeMini() //关闭音频播放器   }, methods: {    closeMini () {     this .mode = -1     this .play = false     if ( this .player) {      this .player.pause()     }     this .$emit( 'callback' , 'close' )    }, }

4.微信分享数据未更新

当返回上一页时，分享的数据没有更新，需要在激活的钩子里再次读取之前存的分享数据

前端精品教程：百度网盘下载

?

1 2 3 4 5 6 7 8 9 10 11 12 13

activated () {    // 单页缓存分享数据重置    this .setShare( this .shareCache)    window.addEventListener( 'scroll' , this .finishReading)   },   methods: {    setShare (opt) {     if (!opt) return     baike.setShare && baike.setShare(opt)    //存该页的分享数据     this .shareCache = opt    }, }

5.router.afterEach里上报pv时url未更新

在导航守卫afterEach里边上报，但是被触发时url还未更新，导致上报的参数有误，解决方法：通过to,from得到下一页，上一页的地址

?

1 2 3 4

var referrer = !from.name ? document.referrer :      `${location.origin}${from.fullPath}` // 通过from.name判断刷新     var curUrl = `${location.origin}${to.fullPath}` || ''

6.hash改变时并不会触发router的守卫

代码中通过hash改变，监听hashchange来处理之后的逻辑，但是就不会触发router的导航守卫，也就是没有跳转，就不存在单页缓存

?

1	window.location.hash = '#refer'

解决办法：用replace替换url,相应的原来hashchange就不会监听到，需要把这块逻辑拿到created里边执行

?

1	this .$router.replace({path: `${location.pathname}${location.search} #refer`})

7.分享问题修复

单页缓存导致返回时分享的链接和自定义文案没有更新，针对特别处理的分享数据，在业务页面修改，解决方法

?

1 2 3 4 5 6 7 8 9 10 11 12

activated () {    this .setShare( this .shareCache)   },     methods: {    setShare (opt) {     if (!opt) return // xx.setShare封装的分享的底层方法     xx.setShare && xx.setShare(opt)     this .shareCache = opt    } }

针对普通分享页面,在router.afterEach里加 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

router.afterEach((to, from) => {   Vue.nextTick(() => {    if (to.meta.notNeedShare) { //不需要分享的页面在路由配置文件里增加{meta: {notNeedShare:true}} 　　　　 if (window.WeixinJSBridge) { 　　　　　　 window.WeixinJSBridge.call( 'hideOptionMenu' ) 　　　　　　} 　　　　 else { 　　　　　　document.addEventListener( 'WeixinJSBridgeReady' , () => { window.WeixinJSBridge.call( 'hideOptionMenu' ) }) 　　　　 　　} 　　　　} 　　 else { 　　　　 // 非分享自定义数据的页面处理 　　　　 xx.setShare({ link: `${location.origin}${to.fullPath}` })   }   }) })

8.关注，收藏等toast提示在返回时未消失，因为延迟时间设置，解决方法：在路由钩子里边强制隐藏

?

1 2 3 4

router.afterEach((to, from) => {   // 切换路由，有toast提示立刻隐藏   xx.toast.hide() })

转载于:https://www.cnblogs.com/zanguixuan/p/9813167.html