Cannot read properties of undefined (reading '$store')-CodePudding

Hii I'm getting this error Cannot read properties of undefined (reading '$store'): This is my router(index.js)

{
  path: '/',
  name: 'login',
  component: () => import( /* webpackChunkName: "hours" */ '../views/login.vue'),
  meta: {
    hideNavbar: true,
  },
  beforeEnter: (to, from, next) => {
    if (this.$store.state.authenticated.admin === true) {
      next('/home');
    } else {
      next(false);
    }
  }

In this above code I'm Struggling to navigate to the home page...getting this error. here`TypeError: Cannot read properties of undefined (reading '$store')

CodePudding user response：

Inside of vue router, you do not have a vue instance. Therefore there is no way to access this.$store.state. In order to access your store you need to include vuex into the router.

import store from '@/store/index.js';

Then to call data from the store you will call the store variable we just imported. For example

if(!store.state.user){
 next('/401');
}

For you case it would look something like this:

import store from '@/store/index.js';

{
  path: '/',
  name: 'login',
  component: () => import( /* webpackChunkName: "hours" */ '../views/login.vue'),
  meta: {
    hideNavbar: true,
  },
  beforeEnter: (to, from, next) => {
    if (store.state.authenticated.admin === true) {
      next('/home');
    } else {
      next(false);
    }
  }
}

I'd suggest looking at this answer as well: Accessing Vuex store in Router

CodePudding user response：

@MaseehaTasneem You may be able to access internals from within the next() function as below. Try the below and see what's available to you. You may be able to do something like,

beforeRouteEnter(to, from, next) {
 next(vm => {
   console.log("vue model", vm)
   
   if (vm.$store.state.authenticated.admin === true) {
     return '/home'
   }

   return false
 }) 
}