This function is in a ponent outside router view.

goToMarkets(){
      this.$router.push({path: '/markets', params: {stock: this.model}})
    }

But the prop is undefined in the "Markets" ponent

Router:

const routes = [
  {
    path: '/markets',
    name: 'Markets',
    ponent: Markets,
    props: true
  },]

Markets ponent:

props: {
    stock: Object
  },

The prop is undefined in the Markets ponent even though it's not before it is passed (in the first function).

This function is in a ponent outside router view.

goToMarkets(){
      this.$router.push({path: '/markets', params: {stock: this.model}})
    }

But the prop is undefined in the "Markets" ponent

Router:

const routes = [
  {
    path: '/markets',
    name: 'Markets',
    ponent: Markets,
    props: true
  },]

Markets ponent:

props: {
    stock: Object
  },

The prop is undefined in the Markets ponent even though it's not before it is passed (in the first function).

• javascript
• vue.js

1 Answer 1

There's a couple of things happening here.

Firstly, route params form part of the URL and are defined upfront in the route definition.

Given the route definition:

{
  path: '/markets/:myparam',
  name: 'markets',
}

then you would transition to it like this:

this.$router.push({ name: 'markets', params: { myparam: 'foo' } })

and the URL would look like:

/markets/foo

You haven't defined any params for your route, so it won't work.

Secondly, the params must be strings or numbers. You can't pass objects as params. There is just no way to do this; it isn't supported. I think the philosophy here is that the URL alone should contain all router state.

One way to solve this is to pass an ID and then fetch the object from the ID from some shared store (e.g. Vuex).

I don't know what your stock model is, but perhaps the param could be just a string like msft so the URL is like /markets/msft? Can you make it work without needing to pass the full object?

If it's a small object, you can deconstruct the properties of the object into query parameters. But you cannot pass an object instance along with the route transition like you would pass an object as an argument to a function call.