标签: nuxt

我想同时使用nuxt @ auth模块和nuxt-i18n。当我希望登录页面具有不同的路由时，会出现问题。例如：

pages: {
 login: {
  en: '/authorization',
  fr: '/autorisation'
 }
}

路由运行良好，但是当我尝试在所有页面都受限制的情况下使用nuxt @ auth时，默认重定向将请求/ login页面。在nuxt.config.js文件中，我可以重写重定向路由，但只能设置一个重定向。

auth: {
 redirect: {
  login: '/fr/autorisation'
 }
}

如何显示给身份验证模块以询问所选语言的路线？提前致谢！

我有一个很简单的问题。

在我的nuxt应用程序中，我想基于一个简单的.json文件中的数组中的对象显示项目列表。此外，当单击特定项目时，我想显示该项目的详细视图以及更多数据。想象一下，这是有关汽车的列表，动态路线如下所示：“ cars / ford-500”。

现在，如果我填充一个vuex变量并将其显示在动态路由组件中-因为客户端加载了SEO，所以我没有得到SEO的好处。此外，如果我想使用动态链接刷新页面，则会收到错误消息，因为刷新后存储被删除。另一个选择是传递路由参数，但是在刷新时再次出现错误。

基本上我不想创建100个html页面，我只是想让nuxt-generate用我的.json文件自动完成它，并且我想在重新加载动态路由时显示该列表项的特定数据。我知道nuxt-generate不会查看动态路径，但是配置文件中有一个nuxt-generate属性，可以用来告诉它们循环通过。

非常感谢你的帮助！

二者data()并async data()给出了相同的结果（和显而易见的是，从结果asyncData()覆盖从结果data()）

两者都会在源代码中生成HTML代码（即，在服务器端呈现的代码）

两者都可以用来await获取要提取的数据（例如：使用axios）

那么，它们之间有什么区别？

<template>
  <div>
    <div>test:  {{test}}</div>
    <div>test2: {{test2}}</div>
    <div>test2: {{test3}}</div>
    <div>test2: {{test4}}</div>
  </div>
</template>

<script>
export default {
    asyncData(app){
    return {test:"asyncData",test2:"asyncData2",test3:"asyncData3"}
  },data(){
    return {test:"data",test2:"data2",test4:"data4"}
 }
}
</script>

结果：

test:  asyncData
test2: asyncData2
test2: asyncData3
test2: data4

在我的应用程序中，我有一个卖方页面，其中显示该卖方列出的产品。我正在使用asyncData获取页面所需的所有数据（对于SEO更好）

asyncData ({params, app, error }) {

    return app.$axios.$get(`/seller/${params.username}`).then(async sellerRes => {

        let [categoriesRes, reviewsRes, productsRes] = await Promise.all([
            app.$axios.$get(`/categories`),
            app.$axios.$get(`/seller/${params.username}/reviews`),
            app.$axios.$get(`/seller/${params.username}/products`)
        ])

        return {
            seller: sellerRes.data,
            metaTitle: sellerRes.data.name,
            categories: categoriesRes.data,
            reviewsSummary: reviewsRes.summary,
            products: productsRes.data,
        }

    }).catch(e => {
        error({ statusCode: 404, message: 'Seller not found' })
    });
},

尽管此方法可以完成预期的工作，但我还是忍不住认为自己做错了。

导航到页面时，nuxt进度栏显示两次（这很奇怪）。

我一直在搜索一段时间，以尝试在asyncData中查找多个请求的示例，但是那里并没有太多内容。

也许我不应该在asyncData中调用多个请求？

当我尝试npm run dev在nuxt项目中运行时，控制台返回以下消息：

'nuxt' is not recognized as an internal or external command, 
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! andromeda@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the andromeda@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我在网站导航中使用了nuxt链接，其中大多数指向首页中的散列元素/锚点，例如：

<nuxt-link
  v-else
  class="text-link"
  :to="localePath('index') + #hash"
>

如果它当前在主页上，但是当我导航到其他站点时，例如它。/ about，然后单击导航栏nuxt链接（因此，我想从/ about导航到/＃hash或/ any-other-site＃hash），显示nuxt错误，以检查控制台上显示“无法读取”的错误。属性'offsetTop'为null”。

我在nuxt.config中的路由器配置（如果没有它，我什至无法滚动到与该元素位于同一站点中的锚定元素！）：

  router: {
    scrollBehavior(to) {
      if (to.hash) {
        return window.scrollTo({ top: document.querySelector(to.hash).offsetTop + window.innerHeight, behavior: 'smooth' });
      }
      return window.scrollTo({ top: 0, behavior: 'smooth' });
      }
  },

在：to属性中，我尝试了'hash''#hash'，没有任何效果。可以请任何人帮助我吗？如何导航到其他页面+ #anchor（以便滚动到该锚点？）

编辑：总体上更新了文本，以使其更短，更简洁。

我正在尝试在运行时配置HTTPS，npm run dev以便可以在本地测试MediaStream等（为此，浏览器需要我提供HTTPS）。

我正在尝试通过nuxt.config.js对其进行配置，但没有成功。

这是我的nuxt.config.js文件：

import fs from "fs";
import pkg from "./package";

export default {
  mode: "spa",

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: pkg.description },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
    ],
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: "#fff" },

  /* …

在Vue中，我们这样定义了meta：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

但是我们如何在nuxt中定义meta？

推荐的Nuxt.js入门模板不建议任何用于单元测试的工具。

我们如何在Nuxt.js中设置和使用Jest进行单元测试？

我基本上想在用户成功登录后重定向到先前的URL。

我使用先前的网址（例如）重定向到登录页面/login?redirect=/page1/page2。

我想在用户身份验证时将其重定向回该URL。我在auth-module这里使用：https : //auth.nuxtjs.org/

我如何登录用户。

methods: {
    async submit() {
      await this.$auth.loginWith('local', {
        data: this.form
      })
    }
}

我可以在文档中找到的唯一东西是：https : //auth.nuxtjs.org/getting-started/options#redirect

但是，它仅重定向到特定页面而不是查询中的上一页。

关于如何实现这一目标的任何想法？