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

【问题标题】：Nuxt.JS: How to get route url params in a pageNuxt.JS：如何在页面中获取路由 url 参数
【发布时间】：2018-06-12 14:31:00
【问题描述】：

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

下定义的动态页面

pages/post/_slug.vue

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

目前我正在使用 asyncData 获取它，如下所示：

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

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

【问题讨论】：

你能告诉你要使用参数做什么吗？
我使用这个参数从 API 中查询和获取一些数据。
那我觉得你的方法是最好的！
好的，谢谢！我将继续使用这种方法，直到我们找到更好的方法:)

标签： javascript vue.js nuxt.js

【解决方案1】：

在.vue文件中，获取Vue路由器route object：

    this.$route

（注意Vue router 在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>

url 路径参数在route.params 下，如您的情况route.params.slug

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

Vue mouted hook 只在客户端运行，当你想获取服务器上的参数时，你可以使用 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>

但是，请注意：

它将在服务器端调用一次（在对 Nuxt 应用程序的第一次请求时）和在导航到更多路由时在客户端调用。 ref

如果你不需要服务器端的参数信息，比如你不需要根据服务器端的参数获取数据，我认为挂载的钩子就足够了。

【讨论】：

【解决方案2】：

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

this.$route.query.<name_of_your_parameter_in_url>

例如

网址：https://example.com/example/?token=QWERTYUASDFGH

通过这行代码，你可以阅读token：

this.$route.query.token

给你QWERTYUASDFGH。

【讨论】：

【解决方案3】：

只需访问路由参数即可

供全球使用，但这不是好的做法：

window.$nuxt._route.params

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

this.$route

或

this.$nuxt._route.params

【讨论】：

这似乎是一个非常糟糕的做法，因为它从未在 nuxt js 文档中提及！
$nuxt.$route 已记录在案。

【解决方案4】：

如果您在商店上下文中（例如 actions.js），您可以像这样访问查询参数：

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

【讨论】：

这对我很有帮助，你。但最好使用 this.$router.currentRoute.params.param_name
查询参数不是路径变量。在这里，OP 正在寻找 path variable 本身的参数。是的，这个工作很差。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

据我所知，这已经是最好的方法，即使不是唯一的方法。但我可以建议一种稍微不同的方法，可能适合您的需求。 使用asyncData 方法从服务器检索数据，而不是在您的虚拟机中放置一个参数并稍后处理，如果是您的情况。然后，您可以处理结果表示逻辑中的数据，而不是任何类型的请求。另一方面，如果您不想将任何内容传递给 VM 或使用 middleware，您也可以根据需要使用 fetch。 p>

【讨论】：

【解决方案7】：

对我来说最好的方法是：

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

【讨论】：