Router.push gives error - 'Maximum call stack size exceeded'

I have recently upgraded my application’s Bootstrap from 2.0.0-rc.18 to Bootstrap 4.4.1

The problem is that I am unable to route between pages within my application. My application does the following to route at the moment

  ```
  console.log('before')
  this.$router.push(`/form-customer/${CustomerId}`)
  console.log('after')
  ```

code in App.vue for beforeEach

  mounted () {
      this.$router.beforeEach((to , from, next) => {
          next()
  
      })
  }

After the Bootstrap upgrade, as soon as route.push is called, I get thousands of errors in the console - ‘Maximum call stack size exceeded’

if I change the code to as below, it just works

 window.location.href = "./form-customer/66"

Why does the route.push not work after Bootstrap upgrade?
Please note that I am not using beforeEach

Hi

Is the route form-customer same as /fred/66? One thougth but I’m only guessing here is that form-customer has some redirect for example the id 66 isn’t set? Does this.$router.push(’{path: ./fred/66’}) work?

How is the route named form-customer designed?

Hi,

Yes both forms are same and this.$router.push(’{path: ./fred/66’}) works

When I try and debug, the error comes in next() which is the VueRouter. I think it could be VueRouter’s history that creates a problem - not sure though. If I try and change the mode of ‘history’ to false, my application gives many errors so I cant change the mode

Can you show how the routes are defined?

const router = new VueRouter({
  ...
})

and so on?

// router.js

import Vue from 'vue'
import Router from 'vue-router'
import Routes from './routes.js'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: Routes

})

// routes.js

export default [
    {
      "path": "/",
      "name": "forms",
      "component": () => import("./views/Customers.vue")
    },
    {
      "path": "/form-customer/:id?",
      "name": "form-customer",
      "component": () => import("./views/FormCustomerSetup.vue")
    }
  ];

Please note that none of my routes were giving problems before bootstrap upgrade

I don’t really understand how the path ./fred/66 is the same as /form-customer/:id? I think I’m missing something here

this.$router.push({path: './fred/66’})

works but what about:

this.$router.push({path: '/form-customer/66'})

I will update the question ./fred/66 was just an example.

why are you adding a global beforeEach guard to the router in the component’s mounted hook?

I don’t think that this is a valid/intended usecase for such a global guard.