Hidden Properties in Params Object

[BhoomiApp]

We are using params to pass data from page to page in vue router 4
This is an example of our route
{
path: "/admin/:pagename",
name: "admin",
meta: {
labelName: "admin-dashboard"
},
component: CurrentPage
},

This is an example of how data is sent and received from page to page:
router.push({
name: 'admin',
params: {
pagename: 'admin-payment',
source: 'admin-storage',
}
});

This is how we are receiving in onMounted
console.log(router.currentRoute.value.params.source);

In our older version (vue router 3) of our application it works fine, however in the newer version (vue router 4) it does not work. Has the passing hidden properties to params been deprecated. Can we use state instead of params. Is this a stable and long term solution, or is there any other solution, please suggest.

[identity-wael]

Yes, state is a supported option, but it has different semantics from route params. Your route declares only :pagename, so source is an unused param and gets discarded. The 4.1.4 changelog records this change.

If the destination needs source when someone bookmarks or shares the URL, use a query parameter:

router.push({
  name: 'admin',
  params: { pagename: 'admin-payment' },
  query: { source: 'admin-storage' },
})

// In the destination component:
const route = useRoute()
console.log(route.query.source)

If this is navigation-specific context that you deliberately want outside the URL, use history state:

router.push({
  name: 'admin',
  params: { pagename: 'admin-payment' },
  state: { source: 'admin-storage' },
})

// Client-side, after navigation:
console.log(window.history.state?.source)

That value belongs to the browser history entry, not route.params. Provide a fallback for direct visits/new tabs, which may have no such state, and pass serializable plain data rather than a reactive object. The navigation options API documents the supported state option.

One other detail: switching pagename on this same route can reuse CurrentPage, so onMounted alone will not handle every navigation. For the query approach, watch the relevant route values when you need to react to subsequent changes.