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 相关文章推荐
jQuery 选择器理解
Mar 16 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
javascript实现简单的进度条
Jul 02 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
小程序红包雨的实现示例
Feb 19 Javascript
vue实现鼠标经过动画
Oct 16 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
php观察者模式应用场景实例详解
2017/02/03 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
详解JavaScript对象和数组
2015/12/03 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
python实现保存网页到本地示例
2014/03/16 Python
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python回调函数用法实例详解
2015/07/02 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python导入模块交叉引用的方法
2019/01/19 Python
NumPy中的维度Axis详解
2019/11/26 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
基于python3生成标签云代码解析
2020/02/18 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
大学生先进事迹材料
2014/02/16 职场文书
期终自我鉴定
2014/02/17 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
优秀经理获奖感言
2014/03/04 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
银行求职自荐信
2014/06/30 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技