I want to check if user has logged in before loading the page, so I use async route:
async (routeTo, routeFrom, resolve, reject) {
if (userIsLoggedIn) { // userIsLoggedIn
resolve({
component: SomePage
})
} else {
resolve({
loginScreen: {
component: LoginScreen
}
})
}
}
And this is what I have in LoginScreen.vue:
<f7-login-screen id="login-screen">
<f7-view>
<f7-page login-screen>
<f7-login-screen-title>Login</f7-login-screen-title>
<f7-list form>
<f7-list-item>
<f7-label>Username</f7-label>
<f7-input name="username" placeholder="Username" type="text"></f7-input>
</f7-list-item>
<f7-list-item>
<f7-label>Password</f7-label>
<f7-input name="password" type="password" placeholder="Password"></f7-input>
</f7-list-item>
</f7-list>
<f7-list>
<f7-list-button title="Sign In" login-screen-close></f7-list-button>
<f7-block-footer>
<p>Click Sign In to close Login Screen</p>
</f7-block-footer>
</f7-list>
</f7-page>
</f7-view>
</f7-login-screen>
If userIsLoggedIn === false, it will show error like this:
framework7.esm.bundle.js?c501:2047 Uncaught TypeError: options[cycleKey].bind is not a function
at eval (framework7.esm.bundle.js?c501:2047)
at Array.forEach (<anonymous>)
at new Framework7Component (framework7.esm.bundle.js?c501:2047)
at Object.create (framework7.esm.bundle.js?c501:2362)
at compile (framework7.esm.bundle.js?c501:5127)
at Router$1.componentLoader (framework7.esm.bundle.js?c501:5197)
at Router$1.modalComponentLoader (framework7.esm.bundle.js?c501:5197)
at loadModal (framework7.esm.bundle.js?c501:3788)
at eval (framework7.esm.bundle.js?c501:3796)
at Array.forEach (<anonymous>)
(anonymous) @ framework7.esm.bundle.js?c501:2047
Framework7Component @ framework7.esm.bundle.js?c501:2047
create @ framework7.esm.bundle.js?c501:2362
compile @ framework7.esm.bundle.js?c501:5127
componentLoader @ framework7.esm.bundle.js?c501:5197
modalComponentLoader @ framework7.esm.bundle.js?c501:5197
loadModal @ framework7.esm.bundle.js?c501:3788
(anonymous) @ framework7.esm.bundle.js?c501:3796
modalLoad @ framework7.esm.bundle.js?c501:3796
(anonymous) @ framework7.esm.bundle.js?c501:3465
asyncResolve @ framework7.esm.bundle.js?c501:3465
async @ routes.js?3ca5:31
navigate @ framework7.esm.bundle.js?c501:3465
handleClicks @ framework7.esm.bundle.js?c501:5790
(anonymous) @ framework7.esm.bundle.js?c501:607
(anonymous) @ framework7.esm.bundle.js?c501:607
emit @ framework7.esm.bundle.js?c501:607
emitAppTouchEvent @ framework7.esm.bundle.js?c501:1866
appClick @ framework7.esm.bundle.js?c501:1866
sendClick @ framework7.esm.bundle.js?c501:1658
handleTouchEnd @ framework7.esm.bundle.js?c501:1850
(anonymous) @ framework7.esm.bundle.js?c501:607
(anonymous) @ framework7.esm.bundle.js?c501:607
emit @ framework7.esm.bundle.js?c501:607
emitAppTouchEvent @ framework7.esm.bundle.js?c501:1866
appTouchEndActive @ framework7.esm.bundle.js?c501:1866
It works for me and shows no error if I replace
component: LoginScreen
with
content: `
<div class="login-screen">
<div class="view">
<div class="page">
...
</div>
</div>
</div>
`
But I want to use vue component.
How should I fix this?
My code was modified from the example here: https://framework7.io/docs/routes.html#routable-modals
I don’t know if I’m doing it right?
Is there any example using routable modals with Vue component (not componentUrl)