Query
I'm trying to figure out how to display a 404 error in a dynamic route using Vue.js without changing the URL. Can anyone help?
This is part of my route.js file (everything seems fine)
{
path: '/work/:id',
name: 'work',
component: () => import( './views/Work.vue' )
},
{
path: '*',
name: 'NotFound',
component: () => import( './views/NotFound.vue' )
}
This is part of Work.vue component where I check if the route parameter exists in my static JSON. If not, I want to open the NotFound component before entering the route.
beforeRouteEnter (to, from, next) {
next(vm => {
vm.item = json.find(item => item.id == vm.$route.params.id)
if(!vm.item) {
next({name: NotFound})
}
})
}
The issue at hand
When I navigate to site.com/work/non-existent-id, the "NotFound" component opens up but the URL changes from site.com/work/non-existent-id to just site.com
My expectation
The desired behavior would be for site.com/work/non-existent-id to display the "NotFound" component while keeping the URL intact as site.com/work/non-existent-id
Example scenario
https://v2.vuejs.org/v2/guide/something - returns a 404 error and remains on the same URL