Redirect 404 Not Found in Nuxt.js
This week I have two special announcements!
First, this Wednesday 10th, at 12.00PM CEST we’re opening the tickets of the VueDay in sunny Alicante, Spain. It’s going to be a community-driven Vue.js conference with great speakers including core members like the Chopin brothers, Eduardo San Martin, myself and more awesome ones!
Hope to see you there! Follow @VueDose on twitter to stay tuned with the latest news!
Second, I’m preparing the Vue Tips Overload! Over the next week, a tip will be published here by a different author each day. Are you as excited as I am?
That said, let’s jump into the tip!
对我来说，Nuxt是我使用过的最好的软件之一。遵循JAM Stack趋势，无论是SPA，Sever Side Rendered（SSR）应用程序还是静态生成的网站，构建Web应用程序都让我变得高效。
但是，仍然有很多时间发现了非常有趣的技巧，这些技巧并未记录在案……需要停止！让我们分享第一个热门的Nuxt提示！
如果您熟悉Nuxt.js，则应该了解页面的概念。您还应该知道有一个特殊的“错误”页面（好吧，它进入“布局”文件夹，但这是一个页面）。
您可以覆盖默认错误页面并根据需要对其进行自定义……但是，如果我们想要其他行为，该怎么办？
在某些情况下，我们可能希望当用户访问不存在的页面时，我们将其重定向到主页。
诀窍是：您可以通过创建以下pages / *.vue组件轻松地做到这一点：
<!-- pages/*.vue -->
<script>
export default {
asyncData ({ redirect }) {
return redirect('/')
}
}
</script>
在Nuxt中，路由由文件命名约定定义。因此，当我们创建* .vue文件时，实际上是在Vue Router上使用通配符路由。
然后，无论是在客户端还是服务器上，我们都使用Nuxt上下文中的redirect方法执行重定向。
我们在asyncData方法上执行此操作，因为我们在那里有上下文，但是它也可以完美地与fetch方法一起使用：
<!-- pages/*.vue -->
<script>
export default {
fetch({ redirect }) {
return redirect("/");
}
};
</script>
Go and try it out by typing any non-existent url. You should see how it is be redirected.
