Vue.js router - conditional component rendering

Question

 routes: [
{
  path: '/',
  name: 'home',
  get component(){
    if(Vue.loggedIn){
      return Home
    }else{
      return Login
    }
  }  
}

I've added a getter and seems to work fine but any variable or function i use in the if statement is undefined. even i've tried using global prototype.$var and mixin functions still with no success.

All i need is if a user is logged in the path '/' renders Dashboard view and if not then Login is rendered to '/'.

Note: I've used beforeEnter: and it works fine. but i don't want redirection.

Might be better using navigation guards for this and redirect to a dedicated login page. — James Coyle
– James Coyle, Commented Feb 20, 2019 at 15:42
Not really sure how this is weaved into the rest of your application, but this looks like a weird design pattern to me. Wouldn't you want to handle that kind of logic on the component and not the router? Then just use something like a v-if or router.push — Imre_G
– Imre_G, Commented Feb 20, 2019 at 15:42

dari0h · Accepted Answer · 2020-01-23 09:47:37Z

6

Using your approach this is what I found is working:

routes: [
{
  path: '/',
  name: 'home',
  component: function () {
    if(loggedIn){
      return import('../views/Home.vue')
    }else{
      return import('../views/Login.vue')
    }
  }  
}

answered Jan 23, 2020 at 9:47

dari0h

9073 gold badges10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Momin Over a year ago

Where should I declare const loggedIn = false

Ryan · Accepted Answer · 2020-08-22 12:18:21Z

In my application I use a router.beforeEach to check if user has logged in. I used a getter to check if logged in state is correct. I also used meta to only show views depending on if user has logged in or not.

I applied this code to the entry point of the application main.js

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!store.getters.loggedIn) {
      next({
        path: '/login',
      })
    } else {
      next()
    }
  } else if (to.matched.some(record => record.meta.requiresVisitor)) {
    // this route is only available to a visitor which means they should not be logged in
    // if logged in, redirect to home page.
    if (store.getters.loggedIn) {
      next({
        path: '/',
      })
    } else {
      next()
    }
  }
})

In my router.js file I have the meta set as this

routes: [
  {
    // this is the route for logging in to the app
    path:      '/login',
    name:      'login',
    component: () => import(/* webpackChunkName: "login" */ './views/Login.vue'),
    props:     true,
    meta:      {
      requiresVisitor: true,
      layout:          'landing',
    },
  },
  {
    // this is the dashboard view
    path:      '/',
    name:      'dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue'),
    meta:      {
      requiresAuth: true,
      layout:       'default',
      breadCrumb:   [
        { name: 'Dashboard' }
      ]
    }
  },
]

notice the meta object. if you are using vue devtools you will see that these params are available to use for validation.

Collectives™ on Stack Overflow

Vue.js router - conditional component rendering

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related