Nuxt.JS: How to get route url params in a page

问题

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!

回答1:

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>

if you don't need the parms information on server, or you don't need any data before rendering ( like make a http request based on the route params before rendering), I think the mounted hook will suffice.

回答2:

Simply you can access routing parameters

for global uses but it is not good practice:

window.$nuxt._route.params

for local uses under pages/components/layout etc, Always we should practice like below

this.$route

this.$nuxt._route.params

回答3:

Nuxt documentation is well maintained and as per the https://nuxtjs.org/api/context/ asyncData exposes API to access various router and server features. For your more clarification you can check out the official examples on Nuxtjs portal. https://nuxtjs.org/examples/custom-routes

回答4:

If you are in the store context (for example actions.js), you can access the query parameters like this:

this.$router.currentRoute.query['param_name']

回答5:

To the best of my knowledge, this already is the best way, if not the only one to do that. But I could suggest an slightly different approach that maybe fit to your needs. Use the asyncData method to retrieve the data from the server instead of put a param at your VM and process later, if is your case. Then, you can handle the result data at the presentation logic and not any kind of request. On the other hand, also you could use, fetch if you don't want to pass anything to the VM or use a middleware instead, according to your needs.

回答6:

Other answers are mostly enough, if you want to access route info inside apollo smart query:

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

来源：https://stackoverflow.com/questions/48068520/nuxt-js-how-to-get-route-url-params-in-a-page

标签

javascript

Vue.js

nuxt.js