How to organize routing so that 403 and 404 pages work?

Question

Vue.js

I want to organize the display of the error "Page not found" and "Access denied". Below is a route (located last in the list) that catches all paths not previously specified and returns the component with an error

let routes = [
{
        path: '*',
        name: 'page_not_found',
        components: {
            default: NotFoundComponent,
        },
        meta: {
            title: 'page_not_found',
        },
        layout: 'empty'
    },
];

That is, the /blabla path will show "Page not found"

Question. How can I make it show "Access Denied" for some existing path under certain conditions? No redirect. With a redirect, the option is simple and already implemented

Answer 1

For example, store an error in the store, if there is, then write it there. Put the error component on the topmost level and then:

<t-error 
            v-if="error"
            :error="error"
          ></t-error>
          <router-view
            v-else
          ></router-view>