Here are a few key points to consider in this scenario.
Initially, it's important to understand that route parameters are included in the URL and are predetermined in the route definition.
For example, with the following route definition:
{
path: '/markets/:myparam',
name: 'markets',
}
You would navigate to it using the following syntax:
this.$router.push({ name: 'markets', params: { myparam: 'foo' } })
Resulting in the URL appearing as:
/markets/foo
If your route does not have defined parameters, it will not function correctly.
Furthermore, it's crucial to note that route parameters must be either strings or numbers. Passing objects as parameters is not supported, as router state should be contained within the URL alone.
One solution could be passing an ID and retrieving the object corresponding to that ID from a shared store like Vuex.
Consider using a simple string as a parameter, such as msft for your stock model, resulting in a URL like /markets/msft. Can you achieve your goal without passing the entire object?
If the object is small, you could destructure its properties into query parameters. However, passing an object instance directly during the route transition is not feasible, similar to passing an object as an argument in a function call.