Vue在Nuxt.js中重定向404页⾯的⽅法
Nuxt.js 依据 pages ⽬录结构⾃动⽣成 vue-router 模块的路由配置。
要在页⾯之间使⽤路由，我们建议使⽤<nuxt-link> 标签。
正⽂
对我来说，Nuxt 是我所⽤过最好⽤的软件代码之⼀。它可以让我⾼效率地打造⽹站应⽤，⽆论这些应⽤是 SPA，还是 SSR，⼜或者是静态站点，这同时也是 JAM Stack 上⾯所提到的趋势。
顺便提⼀点，我们这个⽹站Vuedose 也是使⽤ Nuxt 所建⽴静态站点。
但是，绝⼤多数⾃⼰领悟的很有意思的使⽤技巧并没有被记载沉淀下来，这不⾏，现在我们就来分享第⼀个 Nuxt 的技巧。
如果你熟悉 Nuxt.js，那么你就应该知道pages 的概念是什么。同样地，你也应该知道这个特殊的Error Page，虽然它是被放在 Layouts ⽂件夹中的，但它是被作为⼀个 page。
你可以去重写这个默认的错误页，并且根据你的需求去定制它，但是如果我们想要⼀个不同的表现形式呢？
react router 方法在⼀些情况下，⽐如当⽤户访问⼀个并不存在的页⾯时，我们想要将其重定向到⽹站主页。
这⾥有个⽅法：你可以通过简单地创建pages/*.vue 组件来完成这个需求：
<!-- pages/*.vue -->
<script>
export default {
asyncData ({ redirect }) {
return redirect('/')
}
}
</script>
在 Nuxt 中，路由是通过⽂件命名来定义的。所以当我们创建了⼀个*.vue ⽂件是，我们实际上是在 Vue Router 上使⽤通配符的路由。
然后，我们使⽤ Nuxt 上下⽂中的rediect ⽅法来实现重定向，⽆论它是在客户端还是在服务器端。
我们在 asyncData ⽅法中去做这个重定向，是因为我们在那⾥有上下⽂。但是，我们也可以在 fetch ⽅法中达到同样的效果：
<!-- pages/*.vue -->
<script>
export default {
fetch ({ redirect }) {
return redirect('/')
}
}
</script>
快去使⽤⼀下吧，尝试访问任何⼀个不存在 url，你应该能看到它是如何被重定向的。
总结
以上所述是⼩编给⼤家介绍的Vue在 Nuxt.js 中重定向 404 页⾯的⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。