I am looking to establish a global status property for my application using vue.js and vue-router. This property should be shared between components and used to control access to certain routes based on its value.
For instance, I want to redirect all routes to the root "/" if the status is not initialized. My attempt to achieve this was by implementing the following code:
Vue.use(Router)
const router = new Router({
routes: routes
})
// global status property
Vue.prototype.$isInitialized = false
router.beforeEach((to, from, next) => {
if (!this.$isInitialized) { // <--- does not work, can't access Vue instance from here
next("/")
}
else {
next()
}
})
Unfortunately, this code doesn't work as intended due to the inability to access the Vue instance from the global router hooks. What would be the correct approach to achieve this behavior in Vue?