BeforeEnter not working on component but does work on asyncComponent

1

Hi guys,

I am currently using framework7 v6.0.22 + vue v3.1.4. As title mention, i want to implement route guard for my route. However it didn’t work on initial page. It DOES WORK when i use asyncComponent instead. This issue has been arise by some people, but it seems it has not been solved. Any solution for this?

Here some sample of my code.

function isAuth({ to, from, resolve, reject, router }) {
   console.log('is auth')
   const userData = localStorage.getItem('key')
   if(!userData || userData === 'undefined') {
     localStorage.removeItem('key')
     reject()
     router.navigate({ name: 'Login' })
     // return
   } else {
     resolve()
   }
}

var routes = [
{
  path: '/',
  name: 'Main',
  asyncComponent: () => import('../pages/main.vue'),
  beforeEnter: [isAuth],
},
]

This is working but not when i change this
asyncComponent: () => import('../pages/main.vue'),

to

component: MainPage

I did import MainPage on top of route.js

To be specific, what i mean by working is that, when using asyncComponent, that console.log(‘is auth’) triggered while using component is not.

Please help.

Thanks

2

Yes, because when you use just component it will be included included rendered anyway as it is kind of the optimization process to make whole initial rendering within a single run. So yeah, just use asyncComponent for your case