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

JavaScript

Eva斯丁

2020-03-13

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

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

第1465篇《Nuxt.JS:如何在页面中获取路由URL参数》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
LEY猿 2020.03.13

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

YOC60211911 2020.03.13

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

梅十三Near 2020.03.13

只需访问路由参数

供全球使用,但这不是一个好习惯:

window。$ nuxt._route.params

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

this。$ route

要么

this。$ nuxt._route.params

null 2020.03.13

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android