Question

我正在使用Nuxt.js，并且有一个在

下定义的动态页面

pages/post/_slug.vue

所以，当我访问页面网址时，比如http://localhost:3000/post/hello-world，我怎样才能在页面中读取这个slug参数值。

目前我正在使用asyncData进行调整，如下所示：

  asyncData ({ params }) {
    // called every time before loading the component
    return {
      slug: params.slug
    }
  }

这很好用，但我认为这不是最好的方法，应该有更好的方法让参数可用于页面。任何帮助表示赞赏！

Answer 1

要从URL读取参数，您应该在Nuxt中使用这种方式：

this.$route.query.<name_of_your_parameter_in_url>

例如

URL：https://example.com/example/?token=QWERTYUASDFGH

使用此行代码，您可以阅读token：

this.$route.query.token

并给您QWERTYUASDFGH。

Answer 2

在页面Vue文件中，使用它来获取路由对象：

this.$route

像这样：

<script>
export default {
  mounted() {
    console.log(this.$route.fullpath);
  }
};
</script>

URL路径参数位于route.params下，就像您遇到的情况route.params.slug

<script>
export default {
  mounted() {
    console.log(this.$route.params.slug);
  }
};
</script>

仅在客户端运行vue moute挂钩，当您想在服务器上获取参数时，可以使用asyncData方法：

<script>
export default {
    asyncData({route, params}) {
        //use route
        console.log(route.params.slug)
        //directly use params
        console.log(params.slug)
    }
};
</script>

如果您只想在服务器上运行代码：

<script>
export default {
    asyncData({route, params}) {
        if (process.server) {
            console.log(route.params.slug)
        }
    }
};
</script>

如果您不需要服务器上的parms信息，我想您就不需要asyncData方法。

Answer 3

只需访问路由参数

供全球使用：

window。$ nuxt._route.params

用于页面/组件/布局等下的本地使用

this。$ nuxt._route.params

Answer 4

Nuxt文档维护得很好，并且根据https://nuxtjs.org/api/context/，asyncData公开了API以访问各种路由器和服务器功能。为了进一步澄清您可以在Nuxtjs门户上查看官方示例。 https://nuxtjs.org/examples/custom-routes

Answer 5

据我所知，这已经是最好的方法，即使不是唯一的一种方法。但是我可以建议一种稍微不同的方法，也许适合您的需求。 使用asyncData方法从服务器检索数据，而不是在您的VM上放置参数，然后再处理（如果是这种情况）。然后，您可以处理结果< / strong>表示逻辑中的数据，而不是任何类型的 request 。另一方面，如果您不想将任何内容传递给 VM ，也可以使用，获取，或者根据需要使用中间件。 >

Answer 6

如果您想在apollo智能查询中访问路线信息，其他答案就足够了：

  apollo: {
    items: {
      query: jobsBy,
      variables() {
        return {
          clientId: this.$route.query.id
        }
      },
    }
  }

Answer 7

如果您处于商店上下文中（例如actions.js），则可以访问查询参数，如下所示：

this.$router.currentRoute.query['param_name']

Answer 8

对我来说最好的方法是：

async asyncData(context){
      const query_params=context.route.query;
}

Nuxt.JS：如何在页面中获取url params

8 个答案: