VueJS + VueRouter: Conditionally Disabling A Route

You can add a meta feild to that route you want to conditionally disable it like this:

export const routes = [
  {path: '/', component: foo},
  {path: '/bar', component: bar, meta:{conditionalRoute:true}}
]; 

And use router.beforeEach in your main.js :

router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.conditionalRoute)) { 
        // this route requires condition to be accessed
        // if not, redirect to home page. 
        if (!checkCondition) { 
            //check codition is false
            next({ path: '/'}) 
        } else { 
            //check codition is true
            next() 
        } 
    } else { 
        next() // make sure to always call next()! 
    } 
}) 

Or else use beforeRouteEnter() navigation guard locally on that route's component

beforeRouteEnter(to, from, next){
    next(vm => { 
        // access to component instance via `vm` 
        if(checkCondition){
            next();
        }else{
            next('/');
        }
    })
} 

In your signin component

beforeRouteEnter(to, from, next){
    next(vm => { 
        // access to component instance via `vm` 
        if(vm.$store.state.userUID !== null){
            next('/');
        }else{
            next();
        }
    })
}