Nuxt.js生成具有动态URL的页面

时间:2019-04-02 13:01:02

标签: nuxt generate dynamic-url content-pages

我的nuxtjs应用程序包含具有动态url的页面(实际上页面具有两个参数event-slugevent-id),然后在该页面的asyncData方法中,我从URL中提取了这些参数并用于axios个请求。当我单击事件列表中的一个项目(在另一个events-list页面上)时,此页面打开。当我触发nuxt generate命令时,我遇到错误,因为在生成静态页面时这些参数不可用。 有什么解决办法吗?

解决方案(以防以后有人需要):

假设我的Nuxt应用程序中有/event/:slug/:id条动态路由,并且需要为从后端收到的所有事件创建路由,请将此代码添加到nuxt.config.js中:

 generate: {
    routes: () => {
 axios.get('endpoint to get list of events')
        .then((response) => {
          // assume we received array of events in response.data
          let events = response.data;
          return events.map((event) => {
          
            // assume that my Nuxt dynamic route is /event/:slug/:id
            return `/event/${event.slug}/${event.id}`
          })
        })
    }
  },

0 个答案:

没有答案