What are the problems encountered in the mixed development of mobile phone app with vue single-page applications?

if you want to listen to the physical return key of a mobile phone in each sub-page to specify a route jump, instead of performing a step-by-step jump through history, you can install the listening method on the lifecycle mounted of each sub-page 

mounted () {
    this.addPopState();
},
methods: {
    addPopState() {
        window.addEventListener("popstate",function(){})//popstate
    }
}

but the problem is that the same event is bound in multiple pages, resulting in being overwritten. Is there any good solution?

kneel down and thank you!

Vue.js javascript
May.26,2021

Why not listen for events in your parent components, and then listen for routing changes in (to, from)?

addEventListener can be bound multiple times without overwriting the previous event. Is it affected elsewhere?
what I do to listen for events like this is to listen in the root component and then use $on $emit distribute events
root component to listen and distribute 

window.addEventListener('popstate', () => {
  this.$root.$emit('popstate')
})

listen anywhere at all levels of subcomponents 

this.$root.$on('popstate', () => {

})

the bug that has been difficult for several days is solved. The reason is that the cordova native button is used in the mixed development, which causes the original return key to be triggered when the page triggers the physical return key. The solution is to cancel the native return button function, and the front-end page binds the event of the physical return key, so the result of triggering the return key returns to normal. 

document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown() {
    // Handle the back button
}

Previous: The problem of SPA's direct access to url

Next: Dva yield put

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu