Nuxt.js错误页面跳转可能出现的问题

3 月，跳不动了？>>>

在我们的编程开发中,需要考虑 404 、500、连接超时（服务器关闭）是非常常见的手段.

首先我们知道的两种错误跳转知识:

•  有2种方式处理错误页面
  1. 方式1：默认路径，_.vue 。（先执行）
  2. 方式2：错误页面，~/layouts/error.vue

 

温馨提醒: 方式2的错误跳转详解在上一篇中,如果想了解更多可以自行前往.

 

可能出现的问题描述;

当这两种错误页面跳转的方式同时出现在一个开发环境中(同一个项目), 可能出现当页面找不到需要跳转错误页面时, 而原本已经设定好专门用来错误跳转的方式2的error.vue文件不会自动跳转,反而跳转到_.vue的文件下

例如:

pages文件中有以 _开头命名的vue页面或嵌套文件

 

同时也设定了专门用于跳转的错误页面error.vue

 

当去访问一个找不到的页面时,会直接自动跳转到 _id.vue或_slug/index.vue

而不是正常跳转到错误页面error.vue

 

解决:

在 _id.vue或_slug/index.vue 的页面上添加验证代码,进行判断即可

 

<template>
<div>
    嵌套
</div>
</template>

<script>
export default {
     // 用来验证错误信息,防止跳转这里
validate({params}){
    return /^\d+$/.test(params.id)
}
}
</script>

<style>

</style>

 

以上即可解决该问题,希望能帮到你.

 

 

请给努力中的自己点个赞哦!

每天进步一点点`~~~~~

来源：oschina

链接：https://my.oschina.net/ithuang/blog/3207878