Vue router, show 404 page if id is not matching - vue.js

Question

I am not sure how to show 404 page if parameter not matching? For example, if user name is “joe”, and if someone open “/joe/categories”, categories component should be shown.
Now I want to add guard if someone try to open for example “/james/categories”, in this case I want to do redirection to show 404 component. I am not sure what should I fix? I got error "Unexpected error when starting the router: Error: Missing required param 'catchAll'"
const routes = [
{
path: '/:userName/categories',
name: 'Categories',
component: () => import(/* webpackChunkName: "home" */'#/views/Categories'),
props: true
},
{
path: '/:userName/products',
name: 'Products',
component: () => import(/* webpackChunkName: "home" */'#/views/Products'),
props: true
},
{
path: '/:userName/settings',
name: 'Settings',
component: () => import(/* webpackChunkName: "home" */'#/views/Settings'),
props: true
},
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "login" */'#/views/Login')
},
{
path: '/registration',
name: 'Registration',
component: () => import(/* webpackChunkName: "registration" */'#/views/Registration')
},
{
path: '/:catchAll(.*)',
name: '404',
component: () => import(/* webpackChunkName: "404" */'#/views/404')
}
]
router.beforeEach((to, from, next) => {
const isAuthenticated = store.getters[‘users/isAuthenticated’]
if (!isAuthenticated && to.name !== ‘Login’ && to.name !== ‘Registration’ && to.name !== ‘404’) {
next({
name: ‘Login’
})
} else if (isAuthenticated && store.getters[‘users/getUserName’] !== to.params.userName) {
next({
name: ‘404’
})
} else {
next()
}
})

Answer 1

I think you can do this:
const routes = [
{
path: '/:userName/categories',
name: 'Categories',
component: () => import(/* webpackChunkName: "home" */'#/views/Categories'),
props: true
},
{
path: '/:userName/products',
name: 'Products',
component: () => import(/* webpackChunkName: "home" */'#/views/Products'),
props: true
},
{
path: '/:userName/settings',
name: 'Settings',
component: () => import(/* webpackChunkName: "home" */'#/views/Settings'),
props: true
},
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "login" */'#/views/Login')
},
{
path: '/registration',
name: 'Registration',
component: () => import(/* webpackChunkName: "registration" */'#/views/Registration')
},
{
path: '*',
name: '404',
component: () => import(/* webpackChunkName: "404" */'#/views/404')
}
]
router.beforeEach((to, from, next) => {
const isAuthenticated = store.getters[‘users/isAuthenticated’]
if (!isAuthenticated && to.name !== ‘Login’ && to.name !== ‘Registration’ && to.name !== ‘404’) {
next({
name: ‘Login’
})
} else if (isAuthenticated && store.getters[‘users/getUserName’] !== to.params.userName) {
next({
name: ‘404’
})
} else {
next()
}
})