I have a Vue Js app, and I am using Cordova for wrapping it into android application.
the app contains 2 pages, landing page which contains items, and details page which shows details about an item. when you click on an item on landing page, the details page appears.
I have a button on the details page, when clicking it, it goes to anothercomponent, and this component on mounted() event, it displays a html content from the local storage of the phone using inappbrowser plugin from Cordova.
the problem is, after the inappbrowser shows the contents, if I press the back button of the phone, it redirects me to the details page, then if I press the back button of the phone again, it redirects me to the inappbrowser! instead of the landing page. and if I press it again, it will redirect me to the details page, then if I press the back button again, it will show the innappbrowser and so on....
here is the code of the component which on mounted() event, it shows the innappbrowser
<template>
<div>
<h1>Loading >></h1>
</div>
</template>
<script>
import Vue from 'vue'
export default
{
mounted()
{
Vue.cordova.on("deviceReady", () => {
var ref = window.open('file:///storage/emulated/0/tin/story.html', '_self');
});
}
}
</script>
<style>
</style>
I tried to add the hardwareback=no to the options of inappbrowser but it didn't work.
what should I do to remove the inappbrowser from the stack history when pressing the back button.