Can I create Vue route with empty component?

Question

Say I have these routes:

/admin/login
/admin
/admin/dashboard

The purpose of /admin is there to redirect users to either /admin/login or /admin/dashboard based on their authenticated state. So it has no template/component. What's the correct way to achieve this?

Should I create a Admin.vue component only to redirect users? Or is there another method of doing this?

Answer 1

Sounds like you want a navigation guard. See https://router.vuejs.org/guide/advanced/navigation-guards.html

For example

[{
  path: '/admin',
  beforeEnter (to, from, next) {
    if (userIsAuthenticated) {
      next({ name: 'admin-dashboard' }) // or next('/admin/dashboard')
    } else {
      next({ name: 'admin-login' })     // or next('/admin/login')
    }
  }
}, {
  path: '/admin/dashboard',
  name: 'admin-dashboard',
  component: ...
}, {
  path: '/admin/login',
  name: 'admin-login',
  component: ...
}]

So no, you don't need an Admin component for a route that never renders anything.

---

You'll probably also want a global navigation guard to protect pages that require authentication.