专栏名称: 程序猿何大叔
前端工程师
目录
相关文章推荐
前端早读课  ·  【第3464期】从初级开发者到高级开发者:借 ... ·  18 小时前  
前端早读课  ·  【图书】零基础开发AI ... ·  2 天前  
前端早读课  ·  【第3462期】7 分钟深度理解柯里化 ·  2 天前  
51好读  ›  专栏  ›  程序猿何大叔

【译】Vue 的小奇技(第十三篇):在 Nuxt.js 中重定向 404 页面

程序猿何大叔  · 掘金  · 前端  · 2019-04-23 03:18

正文

阅读 37

【译】Vue 的小奇技(第十三篇):在 Nuxt.js 中重定向 404 页面

特别声明:本文是作者 Alex Jover 发布在 VueDose 上的一个系列。

版权归作者所有。

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。

为了不影响大家阅读,获得授权的记录会放在本文的最后。

说明

由于译者最近跳槽到了新公司,上手新业务,有两周没有及时更新译文了,时效性实在是差,还请各位读者见谅。

前言

这周我要特别宣布两件事情!

第一,这周三 10 号,中欧夏令时的正午 12 点,我们将会开售 VueDay 的门票,届时会在阳光明媚的西班牙亚里坎提举行。这是一个由社区驱动的 Vue.js 技术研讨会,会上邀请了很多大牛过来演讲,其中包括了核心成员想 Chopin 兄弟、Eduardo San Martin、我自己还有其他很多很厉害的人。

希望在会上能够遇到你们啦!在 twitter 可以关注 @VueDose 以获取最新的大会消息哦。

第二,我正在准备 Vue Tips Overload !下周开始,每天将会由不同的作者发布他们的 Vue 小奇技文章到这里。你们有没有和我一样兴奋期待呀?

接下来,我们开始这节小奇技的讲解吧。

正文

对我来说,Nuxt 是我所用过最好用的软件代码之一。它可以让我高效率地打造网站应用,无论这些应用是 SPA,还是 SSR,又或者是静态站点,这同时也是 JAM Stack 上面所提到的趋势。

顺便提一点,我们这个网站 Vuedose 也是使用 Nuxt 所建立静态站点。

但是,绝大多数自己领悟的很有意思的使用技巧并没有被记载沉淀下来,这不行,现在我们就来分享第一个 Nuxt 的技巧。

如果你熟悉 Nuxt.js,那么你就应该知道 pages 的概念是什么。同样地,你也应该知道这个特殊的 Error Page ,虽然它是被放在 Layouts 文件夹中的,但它是被作为一个 page。

你可以去重写这个默认的错误页,并且根据你的需求去定制它,但是如果我们想要一个不同的表现形式呢?

在一些情况下,比如当用户访问一个并不存在的页面时,我们想要将其重定向到网站主页。

这里有个方法:你可以通过简单地创建 pages/*.vue 组件来完成这个需求:

<!-- pages/*.vue -->
<script>
export default {
  asyncData ({ redirect }) {
    return redirect('/')
  }
}
</script>
复制代码

在 Nuxt 中,路由是通过文件命名来定义的。所以当我们创建了一个 *.vue 文件是,我们实际上是在 Vue Router 上使用通配符的路由。

然后,我们使用 Nuxt 上下文中的 rediect 方法来实现重定向,无论它是在客户端还是在服务器端。

我们在 asyncData 方法中去做这个重定向,是因为我们在那里有上下文。但是,我们也可以在 fetch 方法中达到同样的效果:







请到「今天看啥」查看全文