I have two test page here. Home page will alert when page:init happen, and Detail page is nothing in it. When I enter the Detail page from Home page, and refresh the page. Then it alert in Detail page.
In this case, I found the Home page content is loading in the Detail page as “page-previous” class.
Is there any mistake I make?
<!-- App.vue -->
<template>
<f7-app v-bind="f7params">
<f7-view main></f7-view>
</f7-app>
</template>
<script>
import Home from "@/views/Home";
import Detail from "@/views/Detail";
export default {
data() {
return {
f7params: {
view:{
browserHistory:true,
stackPages: true,
},
routes:[
{
path: '/home/',
component: Home,
},
{
path: '/detail/',
component: Detail,
},
],
}
};
},
}
</script>
<!-- Home.vue -->
<template>
<f7-page @page:init="testfun">
<button @click="f7.views.main.router.navigate('/detail/')">jump</button>
</f7-page>
</template>
<script>
import {f7} from "framework7-vue";
export default {
data(){
return{
f7
}
},
methods: {
testfun() {
alert()
}
}
}
</script>
<!-- Detail.vue -->
<template>
<f7-page name="detail" >
</f7-page>
</template>