Nuxt.JS：如何在页面中获取路由URL参数

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

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

只需访问路由参数

供全球使用，但这不是一个好习惯：

window。$ nuxt._route.params

用于页面/组件/布局等下的本地使用，始终应该像下面这样练习

this。$ route

要么

this。$ nuxt._route.params

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

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

在.vue文件中，获取Vue路由器路由对象：

    this.$route

（请注意，Vue路由器在this.$router对象下方）

该$route对象具有一些有用的属性：

{
  fullpath: string,
  params: {
    [params_name]: string
  },
  //fullpath without query
  path: string
  //all the things after ? in url
  query: {
    [query_name]: string
  }
}

您可以使用如下$route对象：

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

网址路径参数位于下方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}) {
            if (process.server) {
                //use route object
                console.log(route.params.slug)
                //directly use params
                console.log(params.slug)
            }
        }
    };
    </script>

如果您不需要服务器上的parms信息，或者在渲染之前不需要任何数据（例如在渲染之前基于路由参数发出http请求），那么我认为已安装的钩子就足够了。