Why last history page load in current page as "page-previous" when I refresh

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>

preloadPreviousPage option