[Vuejs]-Nuxt.js: How do I create dynamic nuxt-links/routes per article?

0👍

<template>
  <nuxt-link :to="linkTo">Link</nuxt-link>
</template>

<script>
export default {
  data() {
    return {
      linkTo: '/about'
    }
  }
}
</script>

try this way

-1👍

First, you will have to create the proper folder structure which enables dymanic routing file system routing

In your case, it could be

  • pages/
    • articles/
      • _id.vue

Add a method to the parent page

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

Which you will invoked when an article link is clicked. It will navigate to the _id.vue page which is the article page itself. On that page you can check the parameter id with this.$route.params.id if you want to pass is to fetch more data.

Leave a comment