how to create a 404 component in vuejs using vue-router

Question

I\'m new to vuejs and I\'m working on my first project with vue. I\'m just wondering how I will route to my 404.vue component when the requested url is not found.

An

Answer 1

There are a couple of ways to do this.

The most generic one is to check if the path matches any route before navigation and if not redirect to the Not found page.

router.beforeEach((to, from, next) => {
  if (!to.matched.length) {
    next('/notFound');
  } else {
    next();
  }
});

See JSFiddle.