Nuxt.js:如何为每篇文章创建动态的nuxt链接/路由?

Question

我在弄清楚动态nuxt链接时遇到了麻烦。

在主页(localhost:3030/(上，有一些文章是由 axios 从后端服务器获取的。

每篇文章都必须指向路由localhost:3030/articles/:postid。

:postid值存储在axios.get数据中，以便我可以动态处理它们。

但是，我不确定如何创建动态nuxt-link，其中每篇文章都有自己的指向其文章内容nuxt-link(/articles/:postid(？

我尝试使用method来执行this.$router.push({ path: 'articles/:postid'})，它指向的路由如下所示：articles/:postid

动态路由的正确方法是什么？

Answer 1

<template>
<nuxt-link :to="linkTo">Link</nuxt-link>
</template>
<script>
export default {
data() {
return {
linkTo: '/about'
}
}
}
</script>

试试这种方式

Answer 2

首先，您必须创建适当的文件夹结构，以实现动态路由文件系统路由

在您的情况下，它可能是

• 页面/
  • 文章/
    • _id.vue

将方法添加到父页

this.$router.push({ path:/articles/${articleId}});

单击文章链接时将调用该链接。它将导航到 _id.vue 页面，即文章页面本身。在该页面上，您可以使用this.$route.params.id检查参数 id，如果要传递以获取更多数据。