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

<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>

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

New to Nuxt and Vue.js. Thanks!

Solution 1:

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.

Solution 2:

If you use post way to send data another route in vuejs or nuxtjs. Here, if route name is = /user So, you have to write the following nuxt-link

<nuxt-link :to="{ name: 'user', params: { userId: 123 }}">User</nuxt-link>

and for receive data next componet, means on "/user" route you have to write inside created or any other place and check console.

created() {
   console.log(this.$route.params)
   console.log(this.$route.params.userId)
   console.log(this.$nuxt._route.params)
   console.log(this.$nuxt._route.params.userId)
}

======================================================== if you use Get way to send data another route in vuejs or nuxtjs. Here, if route name is = /register so, you have to write the following nuxt-link

<nuxt-link :to="{ path: 'register', query: { plan: 'private' }}">Register</nuxt-link>

and for receive data next componet, means on "/register" route you have to write inside created or any other place and check console.

created() {
   console.log(this.$route.query)
   console.log(this.$route.query.plan)
   console.log(this.$nuxt._route.query)
   console.log(this.$nuxt._route.query.plan)
}

Now, you can use this data anywhere like data, mounted, method etc...

How to define route name?????

Add the following code into "nuxt.config.js" file to add route name.

    router: {
        base: '/',
        extendRoutes(routes, resolve) {
          routes.push({
            name: 'user',
            path: '/user',
            component: resolve(__dirname, 'pages/user.vue')
          })
        }
      },

Here,

1. Name property is the name of route that you want to provide as route name.
2. In Path property you have to provide route path.
3. Component property is the component path of that component need to load in this route.