【问题标题】：How to set data into nuxt.js nuxt-link?如何将数据设置到 nuxt.js nuxt-link？
【发布时间】：2018-03-05 21:31:32
【问题描述】：

我正在尝试将数据传递到 nuxt-link，但当我单击链接时，nuxt-link 只是返回 404 错误。它似乎没有获取和加载文件....

使用 :href 和硬编码的后 2 个链接有效

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

Nuxt 和 Vue.js 的新手。谢谢！

【问题讨论】：

标签： javascript vue.js vue-component nuxt.js

【解决方案1】：

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

router-link documentation

以下示例

<!-- 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 查询中提供给您的下一页。

【讨论】：

我不相信是这种情况...我正在尝试将 filePath 传递到 nuxt-link...文档在哪里没有提供将静态资产路径传递到的方法网址。
啊，那种情况下你可以只使用第二个和第三个。因为当我们使用 nuxt-link 或 router-link 时，它应该是您定义的路由范围内的东西。

【解决方案2】：

如果您使用 post 方式发送数据，则在 vuejs 或 nuxtjs 中使用另一个路由。在这里，如果路由名称是 = /user 所以，你必须写下面的nuxt-link

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

对于下一个组件接收数据，意味着在“/user”路由上，您必须在 created 或任何其他地方写入并检查控制台。

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>

对于接收数据下一个组件，意味着在“/注册”路线上，您必须在 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')
          })
        }
      },

这里，

Name 属性是您要作为路由名称提供的路由名称。
在 Path 属性中，您必须提供路由路径。
组件属性是该路由需要加载的组件的组件路径。

【讨论】：