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

Question

我正在使用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
    }
  }

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

Answer 1

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

this.$route.query.<name_of_your_parameter_in_url>

例如

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

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

this.$route.query.token

并给你QWERTYUASDFGH。

Answer 2

在.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请求），我认为已安装的钩子就足够了。

Answer 3

随着 Nuxt3 稳定版本的发布，我想使用组合 API 来更新答案。

.vue这是您在任何文件中访问当前路线的所有有趣部分的方法

<script setup>
const route = useRoute()
</script>

<template>
  <pre>{{ route }}</pre>
</template>

route如果要去，请获取以下内容http://localhost:5678/about?fruit=watermelon

{
  "path": "/about",
  "name": "about",
  "params": {},
  "query": {
    "fruit": "watermelon"
  },
  "hash": "",
  "fullPath": "/about?fruit=watermelon",
  "matched": [
    {
      "path": "/about",
      "name": "about",
      "meta": {},
      "props": {
        "default": false
      },
      "children": [],
      "instances": {},
      "leaveGuards": {
        "Set(0)": []
      },
      "updateGuards": {
        "Set(0)": []
      },
      "enterCallbacks": {},
      "components": {
        "default": {
          "__hmrId": "0a606064",
          "__file": "/home/kissu/code/test/n3-default/pages/about.vue"
        }
      }
    }
  ],
  "meta": {}
}

如果您使用 Vue 开发工具，您还可以单击组件并通过控制台查找实例（如果您想快速检查对象，这会很有帮助）。它提供了比选项卡更多的详细信息Routes。

更多信息请参见：https ://v3.nuxtjs.org/api/composables/use-route#useroute

使用Options API，它将如下（如在控制台中）

<script>
export default {
  mounted () {
    console.log('route object', this.$.appContext.app.$nuxt._route.query)
  },
}
</script>

PS：也许有一种我还不知道的更短的方法。

PS2：我总是对query params和感到困惑"route params"，因此这个差异的纪念品可能很有用。