Tratamento de Erro 404 Página Não Encontrada no Vue.js

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>",
};

Tratamento de erro 404

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.