如何将数据设置到nuxt.js的nuxt-link中？

Question

我尝试将数据传递到nuxt-link中，但当我点击链接时，nuxt-link只会返回404错误。它似乎无法获取和加载该文件...

使用:href和硬编码的第二个和第三个链接可以正常工作。

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

- user805981

Answer 1

Nuxt使用vue-router，通过阅读vue-router文档，您将能够实现您想要的功能。

router-link文档

以下是示例

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

在下一页中，这将作为$route对象的$route.params或在URL查询中如上所示的形式提供。

- sevensilvers

---

我不相信这是事实... 我正在尝试将 filePath 传递到 nuxt-link 中... 文档中没有提供将静态资源路径传递到 URL 的方法。 - user805981

哦，那种情况下你可以直接使用第二个和第三个。因为当我们使用nuxt-link或router-link时，它应该是在你定义的路由范围内的东西。 - sevensilvers

感谢您提供的示例和注释，这正是我需要看到的。 - Kalnode

Answer 2

如果你在vuejs或nuxtjs中使用post方式将数据发送到另一个路由， 假设路由名称为/user， 那么你需要编写下面的nuxt-link：

```html Link Text ```

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

同时，在接收下一个组件的数据方面，这意味着您必须在 "/user" 路由内部编写代码并检查控制台。

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

======================================================== 如果您使用Get方式在vuejs或nuxtjs中向另一个路由发送数据，假如路由名称为/ register，则需要编写以下nuxt-link：

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

并且为了接收下一个组件的数据，在 "/register" 路由中，您需要在 "created" 或任何其他位置编写并检查控制台。

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

现在，您可以像数据、挂载、方法等一样在任何地方使用此数据……

如何定义路由名称？？？？

将以下代码添加到“nuxt.config.js”文件中以添加路由名称。

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

在这里，

1. 名称属性是您要提供为路由名称的路由名称。
2. 在路径属性中，您必须提供路由路径。
3. 组件属性是需要加载到此路由中的该组件的组件路径。

- Kallol Ray