The key to handling 404 pages in a Vue project is to correctly configure the wildcard routing of Vue Router and design friendly page content; 1. Use path: '/:pathMatch(.*)*' to set up wildcard routing and place it at the end of the route array to avoid overwriting other routes; 2. Provide clear tips, homepage buttons, search boxes and other useful information in NotFound.vue; 3. Optionally, automatic redirection or logging of specific paths is achieved through component lifecycle hooks or global guards, thereby improving user experience and project robustness.

404 Pages are a common but overlooked part of Vue projects. Proper handling not only improves the user experience, but also prevents the loss of website visitors. Vue Router provides a flexible way to configure and manage 404 routing, the key is to correctly set routing rules and cooperate with component rendering.

Set up wildcard routing capture 404 requests

In Vue Router, the most direct way to deal with it is to use wildcards * to match all undefined paths. This route should be placed at the end of the route array, because Vue Routers are matched in order.

 const routes = [
  // Other routes {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  // Finally add the following route {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('../views/NotFound.vue')
  }
]

Notice:

• pathMatch(.*)* can capture any path and pass it to the component as a parameter.
• Make sure that the route is the last one, otherwise other routes will be overwritten.

Show friendly 404 page content

It is not enough to just have routing configuration, and the page itself should let the user understand what is going on and provide some useful information or operation suggestions. A good 404 page usually includes:

• Clear prompts (such as "the page does not exist")
• Buttons to return to home page or previous page
• Search box (if the website supports search)
• Simple and beautiful design style, consistent with the overall website

For example in the NotFound.vue file:

 <template>
  <div class="not-found">
    <h1>404 - Page does not exist</h1>
    <p>The page you visit may have been deleted or moved. </p>
    <router-link to="/">Return to homepage</router-link>
  </div>
</template>

This way, even if users encounter errors, they can quickly find a way out, rather than get stuck or leave the website.

Optional: Automatically redirect to home page or other default pages

If you want 404 to automatically jump in certain specific paths, you can make a judgment in the mounted hook of NotFound.vue :

 mounted() {
  if (this.$route.path.startsWith('/admin')) {
    this.$router.push('/');
  }
}

Or you can also combine global guards to handle certain special situations, such as logging, redirection logic, etc.

However, this type of operation should be used in moderation to avoid affecting the normal use of the user.

Basically that's it. Handling 404 routing is not complicated, but it is easy to ignore in details, especially the routing order and page content design. As long as these two parts are done well, the project's robustness and user experience can be effectively improved.

The above is the detailed content of How to handle 404 routes in vue router?. For more information, please follow other related articles on the PHP Chinese website!