javascriptvue.jsvue-componentnuxt.js

How to set data into nuxt.js nuxt-link?


I'm trying to pass data into nuxt-link but nuxt-link is just returning a 404 error when I click on the link. It doesn't seem to be getting and loading the file....

The second 2 links that use :href and hardcoding works

<template>
  <h2 class="subtitle"><nuxt-link :to="{path: filePath}" exact>Nuxt View Menu</nuxt-link></h2>
  <h2 class="subtitle"><a :href="filePath">Vue View Menu</a></h2>
  <h2 class="subtitle"><a href="files/officialMenu.pdf">HardCode View Menu</a></h2>
</template>

<script>
export default {
  layout: 'default',
  data () {
    return {
      filePath: 'files/officialMenu.pdf'
    }
  }
}
</script>

Solution

  • Nuxt uses vue-router by reading off the vue-router documentation you'll be able to achieve what you want.

    router-link documentation

    Example below

    <!-- named route -->
    <nuxt-link :to="{ name: 'user', params: { userId: 123 }}">User</nuxt-link>
    
    <!-- with query, resulting in `/register?plan=private` -->
    <nuxt-link :to="{ path: 'register', query: { plan: 'private' }}">Register</nuxt-link>
    

    This will be available to your next page in $route object as $route.params or in the url query as seen above.