时间戳

首页 > 解决方案 > 使用nuxt部署后如何添加新的动态路由？

vue.js - 使用nuxt部署后如何添加新的动态路由？

问题描述

我使用带有动态路由的 nuxt generate 在 AWS 上部署了我的站点。页面没有问题。现在我想在没有整个部署过程的情况下添加新路线。

这是一个例子：

/post/1
/post/2
/post/3
------- already deployed and works fine ------
/post/4 <- want to add after deployment

我手动上传生成index.html的，S3所以我可以访问文件，/post/4/index.html但如果我尝试/post/4它会显示一个使用/post/_id.vue.

我认为路由没有更新。（我不知道/dist文件夹的路由规则是什么）

有没有办法在没有整个部署过程的情况下上传新的动态路由？

标签： vue.jsnuxt.jsstatic-site

解决方案

我认为您需要在部署之前生成每个页面。默认情况下，generate 命令会忽略动态路由。

转到nuxt.config.js并找到生成密钥。这是生成特定站点的简单示例。

export default {
  ...
  generate: {
    routes: [
      '/post/1',
      '/post/2',
      '/post/3',
      '/post/4'
    ]
  }
}

如果您需要以编程方式生成动态路由，则需要编写一个函数。

查看文档以获取更多信息：https ://nuxtjs.org/api/configuration-generate/

最后，简单的例子：

import BlogService from './services/BlogService.js'
...
export default {
  ...
  generate: {
    routes: () => {
      return BlogService.getPosts().then(response => {
        return response.data.map(post => {
          return '/post/' + post.id
        })
      })
    }
  }
}

推荐阅读