title: TypeError: Cannot read properties of undefined (reading '$router') vuejs
body: <p>So I'm trying to redirect user to diffrent route if api call returns status 422. but I'm getting an error</p>
  <pre><code>TypeError: Cannot read properties of undefined (reading '$router')
  </code></pre>
  <p>my routes.js:</p>
  <pre><code>{
          path: '/dashboard',
          component: Dashboard,
          name: 'Dashboard',
          beforeEnter: (to, form, next) =&gt;{
              axios.get('/api/authenticated')
                  .then(()=&gt;{
                      next();
                  }).catch(()=&gt;{
                      return next({ name: 'Login'})
              })
          },
          children: [
              {
                  path: 'documentCollections',
                  component: DocumentCollection,
                  name: 'DocumentCollections'
              },
              {
                  path: 'document',
                  component: Document,
                  name: 'Document'
              },
              {
                  path: 'createDocument',
                  component: CreateDocument,
                  name: 'CreateDocument'
              },
              {
                  path: 'suppliers',
                  component: Suppliers,
                  name: 'Suppliers'
              },
              {
                  path: 'settings',
                  component: Settings,
                  name: 'Settings'
              },
          ]
  }
  </code></pre>
  <p>I also have login/register components and when I use</p>
  <pre><code>this.$router.push({ name: &quot;DocumentCollections&quot;});
  </code></pre>
  <p>It redirects user without any error. The problem is when I am in children component of dashboard component.</p>
  <p>in documentCollections component i have a method:</p>
  <pre><code>    loadCollections(){
          axios.get('/api/documentCollections')
              .then((response) =&gt; {
                  this.Collections = response.data.data
                  this.disableButtons(response.data.data);
              })
              .catch(function (error){
                  if(error.response.status === 422){
                      //here is where the error happens
                      this.$router.push({ name: &quot;Settings&quot;});
                  }
              });
      },
  </code></pre>
  <p>That loads collections but if user has some data set null api return status 422. and I want him to be redirected to Settings component.
  (both documentCollection and Settings are child components of Dashboard)</p>
  <p>why doesn't this.$router.push work here but works in login/register component?</p>