Framework7

general.js

// Example routes define in src/js/routes.js
import InitialPage from '../pages/initial.vue';
var routes = [
    {
        path: '/',
        component: InitialPage,
    },
    {
        path: '/dashboard/:tab/',
        async(routeTo, routeFrom, resolve, reject) {
            // dynamic import component; returns promise
            const vueComponent = () => import('../pages/dashboard.vue');
            // resolve promise
            vueComponent().then((vc) => {
                // resolve with component
                resolve({ component: vc.default })
            });
        }
    }
];



// programmatically navigate between framework7 pages
let $vm = this;
$vm.$f7.views.main.router.navigate( "/dashboard/receipt", { clearPreviousHistory:true } );


// Axios implement bearer token, normally define in src/js/app.js
import axios from 'axios';
axios.interceptors.request.use(function(config) {
    const user_data = JSON.parse(window.localStorage.getItem('xxx'));
    if ( user_data != null ) {
        config.headers.Authorization = `Bearer ${user_data.token.access_token}`;
    }
    return config;
}, function(err) {
    return Promise.reject(err);
});

programmatically-back.js

<f7-navbar>
    <f7-nav-left @click="close" icon-f7="chevron_down"></f7-nav-left>
    <f7-nav-title>Order History</f7-nav-title>
    <f7-nav-right><f7-link icon-f7=""></f7-link></f7-nav-right>
</f7-navbar>
<script>
export default {
    data(){
        return {
        }
    },
    methods: { 
        close: function(){
            const currentView = this.$f7.views.current;
            if (currentView && currentView.router && currentView.router.previousRoute ) {
                if (currentView.router.previousRoute.path == '/dashboard/receipt/' || currentView.router.previousRoute.path == '/order-history/') {
                    currentView.router.back();
                } else {
                    this.$f7.views.main.router.navigate('/dashboard/receipt/',  { clearPreviousHistory:true });
                }
            } else {
                this.$f7.views.main.router.navigate('/dashboard/receipt/',  { clearPreviousHistory:true });
            }
        },
    }
}
</script>