When it comes to displaying a 404 page if a parameter doesn't match, I'm a bit puzzled. For instance, if the user name is “joe” and someone tries to access “/joe/categories”, then the categories component should be displayed. Now, I want to implement a guard that redirects to a 404 component if someone attempts to access something like “/james/categories”. However, I'm not entirely sure what I need to fix here. The error message I received was "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()
}
})