Solution to Handle 404 Pages in Vue Application

1. What is a 404 page?

The 404 page is one of the HTTP status codes, indicating that the requested resource has not been found. In Vue apps, this usually means that the user tries to access an undefined route or page. Therefore, it is very important to create a custom 404 page, which can guide the user back to a valid path, or provide search functions, etc.

2. Set up Vue Router

First, we need to use vue-router to manage our routes. If you haven't installed vue-router yet, please use the following command to install:

npm install vue-router

Next we need to set up the route in the Vue application. Open your routing configuration file (e.g.src/router/) and make the following settings:

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/';
import NotFound from '../views/'; // Import 404 page components
(Router);

const routes = [
  {
    path: '/',
    component: Home,
  },
  {
    path: '*', // Capture all unmatched routes    component: NotFound,
  },
];

const router = new Router({
  mode: 'history', // Using HTML5's history mode  routes,
});

export default router;

explain

• path: '*': This line of routing configuration will capture all unmatched routes. This is the key to dealing with the 404.
• component: NotFound: When an unknown route is accessed, it will be loadedNotFoundComponents.

3. Create 404 pages

Next, we will create a simple 404 page (). existsrc/viewsCreate a new component file in the directory, the content is as follows:

<template>
  <div class="not-found">
    <h1>404 - Page not found</h1>
    <p>Feel sorry，The page you requested does not exist or has been deleted。</p>
    <router-link to="/">Return to homepage</router-link>
  </div>
</template>

<script>
export default {
  name: 'NotFound',
};
</script>

<style scoped>
.not-found {
  text-align: center;
  padding: 50px;
}

.not-found h1 {
  font-size: 3em;
  color: #e74c3c;
}

.not-found p {
  font-size: 1.5em;
}
</style>

explain

• router-link: Provides a link to return to the homepage, so that users can easily return to valid pages.
• Some simple styles are added to make the page more beautiful.

4. Test your 404 pages

Now that we have set up the route and created the 404 page, let's run the app and test this feature. Use the following command to start your application:

npm run serve

Then in the browser, try to access a wrong route, e.g.http://localhost:8080/nonexistent(Please adjust it according to your actual port number). You should be able to see our custom 404 pages.

5. Further enhancement of 404 pages

Apart from the basic 404 pages, here are some suggestions for enhancing the user experience:

a. Add navigation menu

You can add a navigation menu on the 404 page to facilitate users to find the information they need. For example, you can userouter-linkTo link to other valid pages.

<template>
  <div class="not-found">
    <h1>404 - Page not found</h1>
    <p>Feel sorry，The page you requested does not exist or has been deleted。</p>
    <router-link to="/">Return to homepage</router-link>
    <router-link to="/about">about Us</router-link> <!-- Add other navigation links -->
  </div>
</template>

b. Provide search function

You can also add a search feature on the 404 page to help users find what they want.

<template>
  <div class="not-found">
    <h1>404 - Page not found</h1>
    <p>Feel sorry，The page you requested does not exist or has been deleted。</p>
    <input type="text" placeholder="search..." v-model="searchQuery" />
    <button @click="search">search</button>
    <router-link to="/">Return to homepage</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
    };
  },
  methods: {
    search() {
      // Suppose we have a search page      this.$({ path: `/search`, query: { q:  } });
    },
  },
};
</script>

c. Record 404 access situation

To optimize your application and user experience, consider recording 404 access and analyzing the path and frequency of user access. This can be tracked by integrating with backend services or using analytics tools.

in conclusion

Processing 404 pages in Vue apps is a simple but important task that helps improve user experience and guides users to effective content. With the above steps and sample code, you can easily generate a friendly 404 page in your application, which not only lets users know that the page does not exist, but also guides them back to a valid path.

Hope this blog helps you understand how to process 404 pages in Vue app!

The above is the detailed solution to the 404 page in the Vue application. For more information about Vue processing 404 pages, please follow my other related articles!