(二)03 -自定义路由-extendRoutes-扩展路由-自定义404页面

自定义路由-extendRoutes-扩展路由-自定义404页面

配置

router

该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置。

关于 router 配置项的详细文档

extendRoutes-扩展路由

• 类型: Function

您可能希望扩展Nuxt.js创建的路由。您可以通过extendRoutes选项执行此操作。

例如添加自定义路由:

第十一步：新建nuxt.config.js

export default {
    //配置
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',  //所有路径
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  }
}

路由的模式应该遵循vue-router模式。

第十二步：新建一个pages/404.vue文件

<template>
  <div>
    这是一个漂亮的404页面
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

第十三步：输入一个不存在的路由地址，显示