I have a Laravel + Vue site that allows users to book on to training courses. A typical course URL might be www.mysite.com/courses/a-great-course. This is set up in my router.js file in the usual way:
path: '/courses/:slug',
component: Course,
name: 'course'
with the slug naturally being pulled from the database.
I have a standard vue-router catch all route defined that works fine for the first level of the URL and diverts to a Not Found page, but if I ask for a course that doesn't exist - www.mysite.com/courses/wrong-course - it still loads the page and just sits on the loading animation.
As I understand it I need to implement a navigation guard but I'm completely confused as to how to do that - it seems all the online examples deal with situations like checking if a user is authenticated in the Store.
Can anyone give me some pointers?