Tratamento de Erro 404 - Página Não Encontrada no Vue 3

Em aplicações web, é comum que usuários tentem acessar URLs que não existem ou que não tenham sido previstas. Para lidar com essas situações, é importante configurar uma rota que capture caminhos não correspondentes e exiba uma página de erro personalizada.

No Vue 3, isso pode ser feito utilizando uma rota curinga e um componente dedicado para exibir a mensagem de erro.

Abaixo está um exemplo funcional:

<!DOCTYPE html>
<html>
<head>
    <title>Roteamento no Vue 3</title>
    <meta charset="utf-8" />
    <style>
        ul { list-style-type: none; padding: 0; }
        li { display: inline-block; }
        a { padding: 5px; }
        a.router-link-active, li.router-link-active > a {
            color: red;
        }
    </style>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>
</head>
<body>
    <div id="app">
    <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
    </ul>
    <router-view></router-view>
    </div>

    <script>
    const Home = { template: '<h2>Home Page</h2>' }
    const About = { template: '<h2>About Page</h2>' }
    const NotFound = { template: '<h2>Page Not Found</h2>' }

    const routes = [
        { path: '/', component: Home },
        { path: '/about', component: About },
        { path: '/:pathMatch(.*)*', component: NotFound }
    ];

    const router = VueRouter.createRouter({
        history: VueRouter.createWebHistory(),
        routes,
    });

    const app = Vue.createApp({});
    app.use(router);
    app.mount('#app');
    </script>
</body>
</html>

Importante: o roteamento não funciona ao abrir o arquivo HTML diretamente no navegador. É necessário executar a aplicação em um servidor local. Consulte o tema de introdução sobre o sistema de roteamento no Vue 3 para saber como configurar um servidor com Node.js ou outra solução compatível.

A rota final na configuração é responsável por capturar qualquer caminho que não tenha correspondência com as rotas anteriores:

{ path: '/:pathMatch(.*)*', component: NotFound }

Essa rota utiliza o parâmetro pathMatch com (.*)*, que é uma expressão regular que captura qualquer caminho que não tenha correspondência com as rotas anteriores. Com isso, qualquer URL inválida será redirecionada para o componente NotFound.

O componente NotFound exibe uma mensagem de erro personalizada, informando que a página não foi encontrada:

const NotFound = {
    template: '<h2>Page Not Found</h2>'
}

Por exemplo, ao acessar /algo-invalido, /x/y/z ou qualquer outro caminho que não tenha sido definido, será exibida a mensagem "Page Not Found".

Resumo

Caminhos inválidos podem ser tratados com uma rota curinga.
A sintaxe /:pathMatch(.*)* captura qualquer URL não reconhecida.
O componente associado à rota curinga exibe uma mensagem de erro personalizada.