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

Question

我试图将数据传递给nuxt-link，但当我单击该链接时，nuxt-link返回了一个404错误。它似乎没有获取和加载文件...

后两个链接使用:href和hardcoding

<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的新手。谢谢!

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 object中作为$route.params或在上面看到的url查询中提供给您的下一个页面。

Answer 2

如果您使用post方式发送数据，请使用vuejs或nuxtjs中的另一条路径。在这里，如果路由名称为=nuxt- /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中使用另一条路由发送数据，则使用========================================================。在这里，如果路由名称为=nuxt- /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. Name属性是要作为路由名称提供的路由的名称。在Path属性中，您必须提供路由path.
2. Component属性是需要在此路由中加载的组件的组件路径。