Error while running $router.push in Vue js 3 Vite

[pratik227]

I have crated one route for Login. But it gives error in router.push

{ path: '/login', component: () => import('pages/LoginPage.vue'), name:'Login', props: true },

When I do router.push.

this.$router.push({ name: 'Login', params: { test: {'name':'eduardo'} }, replace: true })

it gives error.

[Vue Router warn]: Discarded invalid param(s) "test" when navigating.

boot file.

    import { route } from 'quasar/wrappers'
    import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
    import routes from './routes'
    
    /*
     * If not building with SSR mode, you can
     * directly export the Router instantiation;
     *
     * The function below can be async too; either use
     * async/await or return a Promise which resolves
     * with the Router instance.
     */
    
    export default route(function (/* { store, ssrContext } */) {
      const createHistory = process.env.SERVER
        ? createMemoryHistory
        : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
    
      const Router = createRouter({
        scrollBehavior: () => ({ left: 0, top: 0 }),
        routes,
    
        // Leave this as is and make changes in quasar.conf.js instead!
        // quasar.conf.js -> build -> vueRouterMode
        // quasar.conf.js -> build -> publicPath
        history: createHistory(process.env.VUE_ROUTER_BASE)
      })
    
      return Router
    })

[sullyD64]

Hi, this is actually intended behavior starting from vue-router v4.1.4. As noted here, artificial params (like test) are discarded when navigating, as it is considered bad practice to have params which are lost when refreshing the page. See the link for some workarounds :)