如何将数据设置到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>

Answer 1

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

路由器链接文档

下面的例子

<!-- 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 查询中使用，如上所示。

Answer 2

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

<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() {
   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. Name 属性是您要提供作为路线名称的路线名称。
2. 在 Path 属性中，您必须提供路线路径。
3. Component 属性是该路由中需要加载的组件的组件路径。

Answer 3

嗨，试试这个简单的事情

<NuxtLink to="/files/officialMenu.pdf" external>
   Nuxt View Menu
  </NuxtLink>