如何在 Nuxt2 和 3 的页面中获取路由 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
    }
  }

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

原文由 asanas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

注意：此答案适用于 Vue2 和 Nuxt2。如果您正在寻找 nuxt3 或 vue3 的答案，请参阅其他答案。

在 .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>

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 应用程序的第一次请求时）和在导航到更多路由时在客户端调用。 参考

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

原文由 Franci 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

this.$route.query.<name_of_your_parameter_in_url>

例如

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

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

this.$route.query.token

并给你 QWERTYUASDFGH 。

原文由 Iman Shafiei 发布，翻译遵循 CC BY-SA 4.0 许可协议