Initial url does not load

[scriptPilot]

Hello Vladimir,

To load at the beginning the last URL from localStorage, I pass the url value to the Vue view object like this: <f7-view main :url="initialURL" :dynamic-navbar="true"> In the data object I define the value from the localStorage: initialURL: localStorage.url ? '/' + localStorage.url : '/' But there is nothing happen, so it seems it's overridden by the initial route function. What's the best way to define the initial route by myself?

My workaround is to deactive pushState and then to load the page manually from root element after init: this.$f7.getCurrentView().router.load({url: localStorage.url, animatePages: false}); But with pushState that will result in black pages.

Many thank in advance,

Dennis

[qiubcym]

go to home page fail. this.$f7.getCurrentView().back({pageName:'/index/', force: true})

Many thank in advance

[nolimits4web]

@scriptPilot to load page in such way, the f7-view layout should be empty, without any pages, like:

<f7-view main :url="initialURL" :dynamic-navbar="true"></f7-view>

[nolimits4web]

@qiubcym, in case you have route with url /index/ for home page

this.$f7.getCurrentView().router.back({url:'/index/', force: true})

[qiubcym]

@nolimits4web It's a inline-page app based on Framework7-Vue kitchen-sink demo In home page, I set the url like this `

` when I open some pages, I go back to index page: `this.$f7.getCurrentView().router.back({url:'/index/', force: true})` `this.$f7.getCurrentView().router.back({pageName:'/index/', force: true})` both above fail. Many thank in advance

[scriptPilot]

Thanks, leaving pages blank and let :url="url"' works. I assign url with url: localStorage.url ? localStorage.url : 'home' (home is the first/main page). But if I reload with a sub page as first page, the back link links to a black page. What is the best way to fix it, to define a kind of initial page?

[scriptPilot]

Complete code:

<template>
  <div>
    <f7-statusbar></f7-statusbar>
    <f7-views navbar-through>
      <f7-view main :url="url" :dynamic-navbar="true">
        <f7-navbar>
          <f7-nav-center sliding>{{text.hello}}</f7-nav-center>
        </f7-navbar>
        <f7-pages>          
        </f7-pages>
      </f7-view>
    </f7-views>   
  </div>  
</template>
<script>

  var text = {
    en: {
      hello: 'Hello World'
    },
    de: {
      hello: 'Hallo Welt'
    }
  }

  module.exports = {
    data: function() {
      return {
        text: text[this.$root.lang],
        url: localStorage.url ? localStorage.url : 'home'
      }
    }
  }
 </script>

[nolimits4web]

@qiubcym for your initial page add page name like:

<f7-page name="home-page">...</f7-page>

And then try:

this.$f7.getCurrentView().router.back({pageName:'home-page', force: true})

[qiubcym]

@nolimits4web It works. thanks. I need to read the doc more carefully and thinking for the solve.

[nolimits4web]

@scriptPilot if you use "url" property in such case F7 will use "reload" to load this page as initial page so there will no be anywhere to back. You may manually use View's load method in this case like: view.router.load({url: '', animatePages: false})

[scriptPilot]

In fact I would like to have initial load of the last page and smooth animation to the home page on click of a back link. My current solution is in "mounted" of the root element:

    // Remember url
    this.$$(document).on('pageInit pageReinit', function(e) {
      if (e.detail.page.url && e.detail.page.url.substr(0, 1) != '#') {
        localStorage.url = e.detail.page.url
      }
    })

    // Restore url
    setTimeout(function() {
      this.$$('a.back').on('click', function() {
        this.$f7.getCurrentView().router.back({url: 'home', force: true})      
      }.bind(this))
    }.bind(this), 0)

What do you think, is that okay or is there a better solution? Current issue - back animation is not so smooth, it is quite quick and with black background partly ...

[orangeShadow]

scriptPilot, why you use setTimeout ? Did you try nextTick ?

[scriptPilot]

@orangeShadow - I did it this way:

    this.$nextTick(function() {
      this.$$('a.back').on('click', function() {
        this.$f7.getCurrentView().router.back({url: app.homepage, force: true})      
      }.bind(this))
    })

But there is still no "real" previous page for smooth backward transition.

Do you have an idea how to realize a forward to next page after initial load without having the first page flashing up, so that there is a real page behind?

[orangeShadow]

How I remember we have problem with Vue's virtual tree, because if we change one element from array (page array), array would be re initialize. May be that is trouble ?

[scriptPilot]

Now it works fine with url="home" and

    let oldUrl = localStorage.url ? localStorage.url.substr() : null
    let oldTab = localStorage.tab ? localStorage.tab.substr() : null
    this.$nextTick(function() {
      // Restore url
      if (oldUrl) {
        this.$f7.getCurrentView().router.load({url: oldUrl, animatePages: false})      
      }
      // Restore tab      
      this.$nextTick(function() {
        if (oldTab) {                
          this.$f7.showTab('#' + oldTab)
        }
      })
    })

Is there any way to proceed showTab() without animation? I have taken a look into the code, but it seems to depend completely on upper class assignments.

Here you could see the current situation - after tab change, scroll, refresh, there is a flash and animation to the selected tab. Any way without? :-)

Dennis

[scriptPilot]

Solved it with hiding the app and show it with setTimeout(..., 0) again. So, the flash is not to see anymore.