Nuxt生成动态路由路径 [英] Nuxt Generate Dynamic Routes Path

问题描述

我正在使用wp-api创建一个网站.我所有的页面都在里面: - pages -- _slug 如果我的网页碰巧是site.com/about

- pages -- about Nuxt将生成这样的html.但是...如果我的路径是site.com/company/about

我可以创建此路线吗?

PS:我正在为此使用wordpress api.因此，如果我的页面有父页面，则路径为:site.com/parent/child

解决方案

您可以使用nuxt.config.js中的routes键执行此操作.

文档在这里: https://nuxtjs.org/api/configuration-generate/#routes

简而言之，您可以在nuxt.config.js:generate.routes中编写一个为您生成页面的函数.

这里是一个示例:nuxt.config.js:

const axios = require('axios')

module.exports = {
  ...
  generate: {
    routes: function () {
      return axios.get('https://your-wordpress-api/')
      .then((res) => {
        return res.data.map((page) => {
          let route = '/whatever/you/like/' + page.slug
        })
      })
    }
  }
}

一些提示:

• 您可以添加有效负载以加快速度: 解决方案

You can use the routes key in nuxt.config.js to do this.

The docs are here: https://nuxtjs.org/api/configuration-generate/#routes

In a nutshell, you can write a function in nuxt.config.js:generate.routes which generates the pages for you.

Here is an example: nuxt.config.js:

const axios = require('axios')

module.exports = {
  ...
  generate: {
    routes: function () {
      return axios.get('https://your-wordpress-api/')
      .then((res) => {
        return res.data.map((page) => {
          let route = '/whatever/you/like/' + page.slug
        })
      })
    }
  }
}

Some tips:

• You can add the payload to speed things up a little: https://nuxtjs.org/api/configuration-generate/#speeding-up-dynamic-route-generation-with-code-payload-code-
• If you need to make a number of requests, use axios.spread

这篇关于Nuxt生成动态路由路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！