F7-V4 + Vue Starter + Prevent history

by Maiki Nahara

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.2.2/css/framework7.bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.2.2/js/framework7.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/framework7-vue.bundle.min.js"></script>
<div id="app">
    <f7-app :params="f7params">
      <f7-statusbar></f7-statusbar>
      
      <!-- Main View -->
      <f7-view id="main-view" main class="safe-areas">
        <f7-page>
          <f7-navbar>
            <f7-nav-left>
              <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu"
              panel-open="left"></f7-link>
            </f7-nav-left>
            <f7-nav-title>My App</f7-nav-title>
            <f7-nav-right>
              <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu"
              panel-open="right"></f7-link>
            </f7-nav-right>
          </f7-navbar>
          <f7-list>
            <f7-list-item link="/page1/" title="Page 1"></f7-list-item>
          </f7-list>
        </f7-page>
      </f7-view>
    </f7-app>
  </div>

<!-- Page 1 Template -->
  <template id="page1">
    <f7-page>
      <f7-navbar title="Page 1" back-link="Back"></f7-navbar>
       <f7-toolbar position='bottom'>
         <f7-link href='#' @click='goto("/page1/")'>To Page 1</f7-link>
        <f7-link href='#' @click='goto("/page2/")'>To Page 2</f7-link>
      </f7-toolbar>
      <f7-block-title>History: </f7-block-title>
      <h3>{{$f7.view.main.router.history}}</h3>
    </f7-page>
  </template>
  
<!-- Page 2 Template -->
  <template id="page2">
    <f7-page>
      <f7-navbar title="Page 2" back-link="Back"></f7-navbar>
      <f7-toolbar position='bottom'>
        <f7-link href='#' @click='goto("/page1/")'>To Page 1</f7-link>
        <f7-link href='#' @click='goto("/page2/")'>To Page 2</f7-link>
      </f7-toolbar>
      <f7-block-title>History:...

JavaScript

// Init F7 Vue Plugin
Framework7.use(Framework7Vue);

// Init Page Components
Vue.component('page1', {
  template: '#page1',
  methods: {
  	goto (p) {
    	goTo(this.$f7.view.main.router, p)
    }
  }
});

Vue.component('page2', {
  template: '#page2',
  mounted () {
  	console.log('mntd')
  },
  methods: {
  	goto (p) {
    	goTo(this.$f7.view.main.router, p)
    }
  }
});

Vue.component('page-not-found', {
  template: '#page-not-found'
});

// Init App
new Vue({
  el: '#app',
  data: function () {
    return {
      f7params: {
        root: '#app',
        id: 'io.framework7.testapp',
        name: 'Framework7',
        theme: 'ios',
        view: {
          stackPages: false,
          allowDuplicateUrls: false
        },
        routes: [
          {
            path: '/page1/',
            component: 'page1'
          },
          {
            path: '/page2/',
            component: 'page2'
          },
          {
            path: '(.*)',
            component: 'page-not-found',
          },
        ],
      }
    }
  },
});

function goTo (r, u, p = {}) {
  let params = {
  	history: addToHistory(r.history, u)
  }
  Object.assign(params, p)
	r.navigate(u, params)
}

function addToHistory (h, u) {
	return !h.includes(u)
}