Nuxt.JS:如何在页面中获取路由 url 参数 [英] Nuxt.JS: How to get route url params in a page

问题描述

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

下定义的动态页面

pages/post/_slug.vue

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

目前我使用 asyncData 获取它，如下所示:

 asyncData ({ params }) {//每次加载组件前调用返回 {slug: params.slug}}

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

解决方案

在 .vue 文件中，获取 Vue 路由器 路由对象:

 this.$route

(注意 Vue router 在 this.$router 对象下)

$route 对象有一些有用的属性:

<预><代码>{完整路径:字符串，参数:{[params_name]:字符串},//没有查询的完整路径路径:字符串//之后的所有事情?在网址中询问: {[query_name]:字符串}}

您可以像这样使用 $route 对象:

 <脚本>导出默认{安装(){console.log(this.$route.fullPath);}};

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

 <脚本>导出默认{安装(){console.log(this.$route.params.slug);}};

Vue muted hook 只运行在客户端，当你想在服务器端获取参数时，可以使用 asyncData 方法:

 <脚本>导出默认{异步数据({路由，参数}){如果(进程.服务器){//使用路由对象控制台.日志(路由.params.slug)//直接使用参数控制台.日志(参数.slug)}}};

但是，请注意:

<块引用>

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

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

I am using Nuxt.js, and have a dymanic page which is defined under

pages/post/_slug.vue

So, when I visit the page url, say, http://localhost:3000/post/hello-world, how can I read this slug parameter value inside my page.

Currently I am geting it using asyncData as follows:

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

This is working fine, but I think this is not the best way, and there should be a better way to make the parameter available to the page. Any help is appreciated!

解决方案

In the .vue file, to get the Vue router route object:

    this.$route

( notice the Vue router is under the this.$router object)

The $route object has some useful properties:

{
  fullpath: string,
  params: {
    [params_name]: string
  },
  //fullpath without query
  path: string
  //all the things after ? in url
  query: {
    [query_name]: string
  }
}

You can use the $route object like this:

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

the url path params is under the route.params, as in your case route.params.slug

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

the Vue mouted hook only run on client, when you want to get the params on server, you can use the asyncData method:

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

But, pay attention:

It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes. ref

If you don't need the params information on server, like you don't need to get data based on the params on server side, I think the mounted hook will suffice.

这篇关于Nuxt.JS:如何在页面中获取路由 url 参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！