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.