Framework7: Uncaught TypeError: Cannot read property 'route' of undefined in Vue.JS 3.5.5

[deanilvincent]

• Framework7 version: ^4.2.2
• Vue.js version: 3.5.5
• Platform and Target: Google Chrome

Here's the console log error

Uncaught TypeError: Cannot read property 'route' of undefined
at Router.back (back.js?770e:577)
at Framework7.handleClicks (clicks.js?9dd2:82)
at eval (events-class.js?8085:79)
at Array.forEach ()
at eval (events-class.js?8085:78)
at Array.forEach ()
at Framework7.emit (events-class.js?8085:72)
at emitAppTouchEvent (touch.js?460e:663)
at HTMLDocument.appClick (touch.js?460e:669)
back @ back.js?770e:577
handleClicks @ clicks.js?9dd2:82
(anonymous) @ events-class.js?8085:79
(anonymous) @ events-class.js?8085:78
emit @ events-class.js?8085:72
emitAppTouchEvent @ touch.js?460e:663
appClick @ touch.js?460e:669

It works at first but after the 2nd try, then it throws an error on the console log.

Here's my App.vue

<template>
  <div id="app">
    <f7-app :params="f7params">
      <f7-view
        tab
        main
        url="/home/"
      >
      </f7-view>
    </f7-app>
  </div>
</template>

<style>
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
</style>

<script>
import routes from "./router";
export default {
  data: () => ({
    f7params: {
      name: "My App",
      id: "com.myapp.test",
      theme: "auto",
      routes: routes
    }
  })
};
</script>

Here's my sample Something Page

<template>
  <div>
    <f7-page :page-content="false">
      <f7-navbar title="Something" back-link="Back">
        <f7-nav-right>
          <f7-link
            icon-ios="f7:reload"
            icon-aurora="f7:reload"
            icon-md="material:compare_arrows"
          ></f7-link>
        </f7-nav-right>
      </f7-navbar>
    </f7-page>
  </div>
</template>

Any help? I'm new with framework7io for Vue and I don't know why it shows an error even those are just from docs.

[nolimits4web]

Would be good to see some live example or JSFiddle with the issue as i can't replicate it

[deanilvincent]

Hi @nolimits4web I've created this sample repository. It's the same setup from what I did on the project that triggers the same error.

[nolimits4web]

@deanilvincent please put there some instruction on how to build it, run and replicate the issue. Even better, that already built version will be included there

[deanilvincent]

@nolimits4web There's a default readme file inside the app folder

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.

[geri777]

I have the same problem when I use links with parameters like
path: '/segement/:id?'

[Chickyky]

I have the same problem when I use links with parameters like
path: '/segement/:id?'

I have same issue
how to fix it?
thanks for advice

[geri777]

Be very careful with the URLs you are building:
For example:

<a :href="'/segment/' + id + '/'"> ... was wrong
<a :href="'/segment/' + id"> .. was ok

If you are redirecting from the controller: instead of using the url with the parameter, use the param argument:

this.$f7router.navigate('/segment/', {
  props: {
    id: 'bar',
  }
})

(https://framework7.io/vue/navigation-router.html#pass-props-to-components)

[Chickyky]

thanks @geri777 for reply
I will check all link navigate
Have you fixed it yet?

[geri777]

yes, mine is currently working.

[geri777]

Bad news, mine is working in the webbrowser. When I create a Cordova App from it and click the back button on the Androd Phone, the app immediately crashes. :-(
I am sure it's still on the router...
@nolimits4web : do you want to re-open this issue? Many thanks!

[geri777]

I have now found out that the app does not crash. It is just closed to the Background. When I press the button for the active apps selection, it's there and I can open it again. Looks like if the router does not push the navigation events to the OS (however this works).