I've been struggling with this for a few days and was hoping for a graceful way of handling dynamic URLs with no data.

I have the following routes:

```
const router = new VueRouter({
  routes: [
    {path: '/product/:slug', component: Product},

    {path: '/404', component: PageNotFound, alias: '*'}
  ]
});

```

In the `Product` component, I have an object of products and, depending on the `slug` variable, load the product to show.

The issue i'm having is when the URL is a slug that does not exist in the products dataset. I would like to load the `PageNotFound` component, without updating the URL.

Is this possible? It would be nice to have a consistent 404 page throughout the app and would also be good for me not to have to repeat myself with a `v-if` in the product table.

The closest I've got to it is this:

```
if(!product) {
    this.$router.replace({path: '/404', query: {product: this.$route.params.slug}});
}

```

However, this updates the actual URL which is not very good UX.

Any clues?