Prevent Vue.Js from accessing route that has no parameters – Route Guards

Route Guard Protection for Routes in Vue.JS. Prevent route being accessed if there are no parameters defined.

Tweet
Share
Share
Pin

When using vue cli we can do route guards to prevent URLs from being accessed if there is no parameters defined. This is a short snippet on how to do route guards and prevent app from breaking.

import Vue from 'vue'
import Router from 'vue-router'
import Welcome from '@/components/Welcome'
import Chat from '@/components/Chat'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Welcome',
      component: Welcome
    },
    {
      path: '/chat',
      name: 'Chat',
      component: Chat,
      props:true,
      beforeEnter: (to,from,next) => {
          // console.log(to.params.name)
          if(to.params.name){
            next()
          } else {
            next({ name: 'Welcome' })
          }
          
      }
    }
  ]
})