Vue在 Nuxt.js 中重定向 404 页面的方法


Posted in Javascript onApril 23, 2019

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

要在页面之间使用路由,我们建议使用<nuxt-link> 标签。

正文

对我来说,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 方法中达到同样的效果:

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

快去使用一下吧,尝试访问任何一个不存在 url,你应该能看到它是如何被重定向的。

总结

以上所述是小编给大家介绍的Vue在 Nuxt.js 中重定向 404 页面的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 Javascript
vue项目首屏加载时间优化实战
Apr 23 #Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 #Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 #Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 #Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 #Javascript
js继承的这6种方式!(上)
Apr 23 #Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 #jQuery
You might like
PHP5中MVC结构学习
2006/10/09 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
Python isinstance判断对象类型
2008/09/06 Python
Python批量转换文件编码格式
2015/05/17 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
Python的in,is和id函数代码实例
2020/04/18 Python
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
小班开学寄语
2014/04/04 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
音乐学专业求职信
2014/07/22 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
幼儿园教师求职信
2015/03/20 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP