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

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

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

this.$route

像这样：

<script>
export default {
  mounted() {
    console.log(this.$route.fullPath);//or $route.path, which excluding url query 
  }
};
</script>

url path params位于route.params下，如你的情况route.params.slug

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

vue挂钩只运行客户端，当你想在服务器上获取params时，你可以使用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>

如果您不需要服务器上的手掌信息，我认为您不需要asyncData方法。

Answer 2

您只需访问路由参数即可

用于全球用途：

窗口。$ nuxt._route.params

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

这一点。$ nuxt._route.params

Answer 3

Nuxt文档维护得很好，并且根据https://nuxtjs.org/api/context/ asyncData公开API来访问各种路由器和服务器功能。有关更多说明，您可以查看Nuxtjs门户网站上的官方示例。 https://nuxtjs.org/examples/custom-routes

Answer 4

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