[Vuejs]-How to access the url of dynamic nested route in nuxt.js

by

1👍

✅

This can be done like this (in activate.vue), no need to have any additional pages

<button @click="$router.push({ path: '/activate', query: { serial: 'esdse3434', machine: 'jni9ninei9' } })">
  Generate link
</button>

EDIT on how to make it dynamic

mounted() {
  this.$router.push({
    path: '/activate',
    query: { serial: this.$route.query.serial, machine: this.$route.query.machine },
  })
},

More info on the official docs: https://router.vuejs.org/guide/essentials/navigation.html

👤kissu

3👍

The problem is, you’re confusing route params with query params. Route params are separated parts of the URL using /. A query string is what you’re looking for to create those types of URL.

If I created a directory structure the same as yours and then on mounted inside _machine.vue, I ran console.log(this.$route.params) I would get the following output:

{
    serial: "test",
    machine: "test2"
}

To use this page structure, the URL would look like localhost:3000/activate/test/test2.

To use query strings, you need to have a page called activate.vue then inside that page you need to access $route.query.serial and $route.query.machine. You would not use folders and nested pages. That’s only for route params.

👤Jordan

Leave a comment