addRoute doesn't update route list - vue.js

Question

I try to adding routes to my router while the application is already running, more specifically after the connection.
I have this in my app.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path : '/',
name: 'principal',
component : PrincipalComponent,
},
{
path : '/403',
component : Erreur403Component,
}
];
const router = new VueRouter({routes});
export {router}
And in my vuex
import {router} from "../app.js"
const actions = {
loginUser({state, commit}, user) {
return new Promise((resolve, reject) => {
axios.get('/menuGeneration')
.then(data => {
data.data.forEach(route => {
router.addRoute({
path : "\test"
});
router.push("\test");
})
})
.catch(err => console.log(error);
console.log(router.getRoutes());
})
}
}
But I only have the first 2 routes declared in app.js
I have checked that axios sends me the list of menus
If anyone has a lead, I'm intereste !
For information :
vue#2.6.12
vue-router#3.6.5
vuex#3.6.0
UPDATE
After the advice yoduh of I modified the code following
axios.get('/menuGeneration')
.then(data => {
data.data.forEach(route => {
router.addRoute({
path : "/test",
component : TestComponent
});
})
console.log(router.getRoutes());
})
.catch(err => console.log(error);
And it's work
But when i add a replaces for the current resource
axios.get('/menuGeneration')
.then(data => {
data.data.forEach(route => {
router.addRoute({
path : "/test",
component : TestComponent
});
})
window.location.replace('/dashboard')
})
.catch(err => console.log(error);
it does not guard the routes.
what is the way to keep the routes ?

Answer 1

it does not guard the routes.
what is the way to keep the routes ?
You must always navigate using vue-router if you want vue-router's navigation guards to activate on route changes. This line:
window.location.replace('/dashboard')
can be replaced with the vue-router replace equivalent which will activate your navigation guards
router.replace('/dashboard')