This.$f7router.navigate() breaks when migrating from v4 to v5

1

I’m trying to update my app from Framework7 v4 to v5.

I have a route like this:

  {
    name: 'setup',
    path: '/setup/:jsonConfig?',
    component: SetupPage
  },

I navigate to it like this:

      this.$f7router.navigate({
        name: 'setup',
        params: {
          jsonConfig: JSON.stringify({
            exitPath: '/choose-signin-method'
          })
        }
      })

It worked fine in v4, but in v5, this error occurs:

bugsnag-vue.js?3181:30 Error: Framework7: error constructing route URL from passed params:
Route: /setup/:jsonConfig?
TypeError: Expected "jsonConfig" to match "[^\/#\?]+?", but got "{"exitPath":"/choose-signin-method"}"
    at Router.constructRouteUrl (router-class.js?7408:489)
    at Router.navigate (navigate.js?6acf:690)
    at VueComponent.goToAdminSignIn (ChooseSignInMethodPage.vue?0671:30)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
    at eval (vue-component-dispatch-event.js?56bc:4)
    at Array.forEach (<anonymous>)
    at eval (vue-component-dispatch-event.js?56bc:3)

I’m not sure if it’s caused by one of these changes to path-to-regexp:


Do you have any ideas?

2

Yes, path-to-regexp was update to latest version and more likely it is a breaking change, but such url as /choose-signing-method/{exitPath: '...} is not really a valid URL, better you use url queries like /setup/?exitPath=/choose-signin-method

3

Thanks. It used to automatically url encode the json object, and now even if I explicitly encode it, it still fails. I think path-to-regexp decodes it before applying the regex. I’m not sure if f7 can pass options to path-to-regexp telling it not to decode it when running regex.

I have another spa that uses vue router, and json object route param works fine with that.

I’ll try the query parameter, and see if that works instead. I’m not sure how that works with the routing.