如何设置数据到nuxt.jsnuxt-link？

Question

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

使用 :href 和硬编码的第二个 links

<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 文档你将能够实现你想要的。

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 查询如上所示。

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

这里，

名称属性是您要提供的路线名称。
在路径属性中你必须提供路由路径。
组件属性是该路由需要加载的组件路径

如何设置数据到nuxt.jsnuxt-link？

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

javascript

vue.js

vue-component

nuxt.js

现在，您可以在任何地方使用此数据，例如数据、挂载、方法等...