I am looking to dynamically bring in data from a component file into a router file, and then allow the use of next() based on the value of the imported data.
In my App.vue file, I am using
this.$router.push({name: "Dashboard"})authenticated: false to true. This change is triggered by a watch.
The issue lies in the fact that the router file will always receive the original value of false, even with dynamic importing.
App.vue
watch: {
authenticated(){
console.log(this.authenticated) //This outputs 'true'
this.$router.push({name: 'Dashboard'}); //Routing is triggered
}
}
router file (index.js)
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
beforeEnter(to, from, next){
(async ()=>{
const mod = await import('../view/App.vue'); //Dynamic import
let result = mod.default.data().auth; //Accessing the 'authenticated' value from App.vue
console.log(result); //The output is 'false', but it should be 'true'
result ? next() : next({name: 'Login'});
})()
}
}
I have attempted various async methods, but none have proven successful in solving the issue.