在NUXT应用程序中创建动态路由

本文将通过一个部署在Netlify上的电商示例，演示如何在Nuxt应用中创建动态路由。这是一个常见的场景：您从API获取数据，而这些数据可能未知、数量庞大或随时变化。幸运的是，Nuxt使创建动态路由的过程非常流畅。

让我们开始吧！

演示站点 GitHub仓库

创建页面

本例中，我使用mockaroo创建了一些虚拟商店数据，并将其存储在静态文件夹中。通常，您会使用fetch或axios以及Vuex store中的action来收集这些数据。无论哪种方式，我们都将数据与Vuex一起存储在store/index.js中，其中包含UI状态和一个空的购物车数组。

import data from '~/static/storedata.json'

export const state = () => ({
  cartUIStatus: 'idle',
  storedata: data,
  cart: []
})

需要注意的是，在Nuxt中，我们只需在pages目录中创建一个.vue文件即可设置路由。因此，我们有一个index.vue页面作为主页，一个cart.vue页面作为购物车，等等。Nuxt会自动为我们生成这些页面的所有路由。

为了创建动态路由，我们将创建一个目录来存放这些页面。在本例中，我创建了一个名为/products的目录，因为路由将指向每个产品的详细信息视图。

在这个目录中，我将创建一个带有下划线的页面，以及我想要用于创建路由的每个页面的唯一标识符。如果查看购物车中的数据，它看起来像这样：

[
  {
    "id": "9d436e98-1dc9-4f21-9587-76d4c0255e33",
    "color": "Goldenrod",
    "description": "Mauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis. Integer aliquet, massa id lobortis convallis, tortor risus dapibus augue, vel accumsan tellus nisi eu orci. Mauris lacinia sapien quis libero.",
    "gender": "Male",
    "name": "Desi Ada",
    "review": "productize virtual markets",
    "starrating": 3,
    "price": 50.40,
    "img": "1.jpg"
  },
  …
]

您可以看到每个条目的ID都是唯一的，因此这是一个很好的候选标识符，我们将页面命名为：

_id.vue

现在，我们可以使用路由参数在数据中存储特定页面的ID：

data() {
  return {
    id: this.$route.params.id,
  }
},

对于上面的条目，如果我们在devtools中查看数据，它将是：

id: "9d436e98-1dc9-4f21-9587-76d4c0255e33"

我们现在可以使用它从存储中检索此条目的所有其他信息。我将使用mapState：

import { mapState } from "vuex";

computed: {
  ...mapState(["storedata"]),
  product() {
    return this.storedata.find(el => el.id === this.id);
  }
},

我们正在过滤storedata以查找具有唯一ID的条目！

通知Nuxt配置

如果我们使用yarn build构建应用程序，我们就完成了，但是我们使用Nuxt创建一个静态站点进行部署，在本例中是在Netlify上。当我们使用Nuxt创建静态站点时，我们将使用yarn generate命令。我们必须使用nuxt.config.js中的generate命令来让Nuxt知道动态文件。

此命令将期望一个函数，该函数将返回一个解析为如下所示数组的Promise：

export default {
  generate: {
    routes: [
      '/product/1',
      '/product/2',
      '/product/3'
    ]
  }
}

为此，我们将在文件顶部从静态目录引入数据，并创建函数：

import data from './static/storedata.json'
let dynamicRoutes = () => {
  return new Promise(resolve => {
    resolve(data.map(el => `product/${el.id}`))
  })
}

然后，我们将在配置中调用该函数：

generate: {
  routes: dynamicRoutes
},

如果您使用axios从API收集数据（这更常见），它看起来更像这样：

import axios from 'axios'
let dynamicRoutes = () => {
  return axios.get('https://your-api-here/products').then(res => {
    return res.data.map(product => `/product/${product.id}`)
  })
}

就这样，我们完成了动态路由的设置！如果关闭并重新启动服务器，您将看到每个产品的动态路由生效！

对于本文的最后部分，我们将继续介绍页面的其余部分是如何创建的，以及我们如何将项目添加到购物车，因为这可能是您也想学习的内容。

填充页面

现在，我们可以使用任何我们想要的格式来填充页面，因为我们可以通过product计算属性访问所有信息：

<main><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Creating Dynamic Routes in a Nuxt Application "><h1>{{ product.name }}</h1>
  <h4>{{ product.price | dollar }}</h4>
  <p>{{ product.description }}</p>

 ...
</main>

在本例中，我们还希望将项目添加到存储中的购物车中。我们将添加添加和删除项目的功能（同时不允许减少数量低于零）

<p>
  <button> 0 ? quantity-- : quantity = 0">-</button>
  {{ quantity }}
  <button> </button>
</p>
...
<button>Add to Cart</button>

在该组件的方法中，我们将项目加上一个新字段（数量）添加到一个数组中，我们将该数组作为有效负载传递给存储中的mutation。

methods: {
  cartAdd() {
    let item = this.product;
    item.quantity = this.quantity;
    this.tempcart.push(item);
    this.$store.commit("addToCart", item);
  }
}

在Vuex存储中，我们将检查项目是否已存在。如果存在，我们将只增加数量。如果不存在，我们将添加包含数量的整个项目到购物车数组。

addToCart: (state, payload) => {
  let itemfound = false
  state.cart.forEach(el => {
    if (el.id === payload.id) {
      el.quantity  = payload.quantity
      itemfound = true
    }
  })
  if (!itemfound) state.cart.push(payload)
}

我们现在可以使用存储中的getter来计算总计，这最终将传递给我们的Stripe无服务器函数（关于此的另一篇文章即将推出！）。我们将为此使用reduce，因为reduce非常擅长从许多值中检索一个值。（我在这里写了更多关于reduce如何工作的细节）。

cartTotal: state => {
  if (!state.cart.length) return 0
  return state.cart.reduce((ac, next) => ac   next.quantity * next.price, 0)
}

演示站点 GitHub仓库

就是这样！我们已经设置了各个产品页面，Nuxt会在构建时为我们生成所有各个路由。您一定会想自己尝试一下Nuxt。?

以上是在NUXT应用程序中创建动态路由的详细内容。更多信息请关注PHP中文网其他相关文章！