Overwrite the same name, solution: parent component plus scoped
<style lang="scss" scoped> @import './' </style>
Subcomponents with the same name style plus deep
/deep/ .tabs-row {
.items-wrp{
padding-left: .34rem;
}
.item {
margin:0 .12rem .16rem 0;
}
}
2. Global binding of events
Events bound to window, document or body, switching to the next page will also be triggered and need to be destroyed and prevent memory leakage. If globally bound events are used for public components, use off().on() with caution, because other components that may be referenced globally bound events will be removed.
destroyed: It will trigger when returning to prevent scroll on window from being triggered when returning to the previous page. It is recommended to remove events in beforeDestroy or add new DOM or mobile DOM operations on the official website.
deactivated: It will be triggered when moving to a new page, preventing scroll on the window from being triggered when entering the next page
activated: The cached page is activated, that is, it is triggered when it returns, created will not be triggered at this time, and the event will be rebinded.
activated () {
// Don't bind scroll directly, there are restrictions here ()
},
destroyed () {
$(window).off('scroll', )
},
deactivated () {
$(window).off('scroll', )
},
3. Audio continue
When the audio is still playing, jump to the new page, and the audio is still playing. Solution: Advancing to the new page will trigger the deactivated hook, and the audio playback will be paused.
deactivated () {
// Pause audio playback while moving forward ()
},
methods: {
pauseAudio () {
this.$ && this.$()
}
}
When the audio is still playing, return to the previous page, and the audio is still playing. Solution: Return will trigger the audio player to be turned off in the destroyed hook.
destroyed () {
() //Switch off the audio player },
methods: {
closeMini () {
= -1
= false
if () {
()
}
this.$emit('callback', 'close')
},
}
4. WeChat shared data has not been updated
When returning to the previous page, the shared data is not updated. The shared data stored before needs to be read again in the activated hook
activated () {
// Reset data for single page cache sharing ()
('scroll', )
},
methods: {
setShare (opt) {
if (!opt) return
&& (opt)
//Save the sharing data on this page = opt
},
}
The URL was not updated when reporting the pv
Report in the navigation guard afterEach, but the url has not been updated when it is triggered, resulting in the reported parameters being incorrect. Solution: Get the next page and the address of the previous page through to, from
var referrer = ! ? :
`${}${}` //Refresh by judging
var curUrl = `${}${}` || ''
The router's guard will not be triggered when changing
The code uses hash change to listen to hashchange to process the subsequent logic, but the router's navigation guard will not be triggered, that is, there is no jump, and there will be no single page cache.
= '#refer'
Solution: Replace the url with replace, the corresponding hashchange will not be listened to, and this logic needs to be taken into created to execute
this.$({path: `${}${}#refer`})
7. Share problem fix
Single page cache causes the shared links and custom copy not to be updated when returning. For the shared data specially processed, it is modified on the business page. Solution
activated () {
()
},
methods: {
setShare (opt) {
if (!opt) return
// The underlying method of encapsulation sharing && (opt)
= opt
}
}
For ordinary sharing pages, in Riga
((to, from) => {
(() => {
if () { //Add {meta: {notNeedShare:true}} in the routing configuration fileif () {
('hideOptionMenu')
}
else {
('WeixinJSBridgeReady', () => { ('hideOptionMenu') })
}
}
else {
// Page processing without sharing custom data ({ link: `${}${}` })
}
})
})
8. Follow, favorites, etc. toast prompts did not disappear when returning because of the delay time setting. Solution: Force hide in the routing hook
((to, from) => {
// Switch routes, hid it immediately if there is a toast prompt ()
})
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.