• Redirect 404 Not Found in nuxt.js

  • Alex Jover

  • Translator: Uncle Ho, the programmer

Special disclaimer: This article is a series posted by author Alex Jover on VueDose.

Copyright belongs to the author.

The translator had already communicated with the author before the translation to get permission to translate the whole series.

In order not to disturb your reading, the authorization record is placed at the end of this article.

instructions

As the translator recently moved to a new company and started new business, he did not update the translation in time for two weeks. The timeliness is really poor, please forgive me.

preface

I want to make two special announcements this week!

First, this Wednesday the 10th, 12:00 noon CENTRAL European Daylight Time, we will be selling tickets for VueDay, which will take place in the sunny city of Arikanti, Spain. It was a community-driven Vue. Js technology workshop that invited a number of great speakers, including core members like the Chopin brothers, Eduardo San Martin, myself and many other great people.

Hope to meet you at the meeting! Follow @vueDose on Twitter for updates from the conference.

Second, I am preparing for Vue Tips Overload! Starting next week, a different author will post their Vue mini-blog posts here every day. Are you as excited as I am?

Next, let’s start this little weird technique.

The body of the

For me, Nuxt is one of the best pieces of software code I’ve ever used. It allows me to efficiently build web applications, whether they are SPA, SSR, or static sites, which is the trend JAM Stack mentioned above.

By the way, Vuedose is also a static site built using Nuxt.

However, most of the most interesting tips I’ve learned haven’t been written down, and we’re going to share the first Nuxt tips.

If you are familiar with Nuxt.js, then you know what Pages is. Similarly, you should be aware that this particular Error Page is listed as a Page, even though it is placed in the Layouts folder.

You can override the default error page and customize it to your needs, but what if we wanted a different representation?

In some cases, like when a user visits a page that doesn’t exist, we want to redirect it to the site’s home page.

Here’s how: You can do this by simply creating the Pages /*.vue component:

<! -- pages/*.vue -->
<script>
export default {
  asyncData ({ redirect }) {
    return redirect('/')}}</script>
Copy the code

In Nuxt, routes are defined by file naming. So when we create a *. Vue file, we are actually using wildcard routes on the Vue Router.

We then use the Rediect method in the Nuxt context to implement the redirection, whether it is on the client or server side.

We do this redirection in the asyncData method because we have context there. However, we can achieve the same effect in the fetch method:

<! -- pages/*.vue -->
<script>
export default {
  fetch ({ redirect }) {
    return redirect('/')}}</script>
Copy the code

Go ahead and try to access any URL that doesn’t exist and you should be able to see how it gets redirected.

That’s all for this week! You can read the article online and copy and paste the source code. If you like this series, please share it with your colleagues!

conclusion

Other articles in this series will be translated and posted to nuggets as they are published on the series website. Please keep an eye on uncle He, I believe I will bring you more quality content, don’t forget to like ~

If you want to know more about the translator, please check out the following:

  • Personal blog: blog.hadesz.com
  • Personal Github repository: github.com/hadeshe93
  • Personal wechat official account: Search “Uncle He”

Request translation of authorization records



If you think this article is good, share it with your friends