Redirect doesn't invoke mounted hook from nuxt app

Support
, ,
#1

Hi, I’m trying todo a rewrite to get a param from the url www.myapp/test/PARAM

So I tried this redirect.

[[redirects]]
  from = "/test/*"
  to = "/test"
  status = 200

I’m using nuxtjs to build my app. Inside my mounted hook I want to get the route

<template>
  <div>
    <h1>TEST PAGE</h1>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$route)
  },
}
</script>

If I use this url www.myapp/test/ I see an output in the console, but if I’m using www.myapp/test/PARAM the console is empty… but the content of the page is displayed

this is the folder structure

-| test/
---| index.vue

Is this the proper way to get params from dynamic urls and if yes what I’m doing wrong?

gregor

#2

Hey there,
If I’m understanding correctly, the param won’t be available at the time you’re trying to access it because of your redirect rule. That rule is processed before we return the page to the browser, so any param you enter will have been parsed out by the time you are checking the console.log. The timing of this is:

  1. You enter myapp.com/test/param in the browser url bar
  2. The browser makes a request to our servers
  3. Our servers check the redirect rule associated with that path. The rule says “if someone requests myapp.com/test/*, send them to this path instead: myapp.com/test/”
  4. Our servers return myapp.com/test/ to the browser; your browser updates accordingly.

So if you want to retain the param, I’d suggest incorporating query params into your redirect rules:

Let us know if that helps or if you have other questions!