title: Accessing Vue.$router inside an external "service" class
body: <p>I have a service which extends EventEmitter.</p>
  
  <p><code>services/service/service.js</code> (relative to main.js)</p>
  
  <pre><code>import { EventEmitter } from "events";
  
  class Service extends EventEmitter {}
  </code></pre>
  
  <p>Inside the Service class, I have the following method which returns a Promise:</p>
  
  <pre><code>  /**
     * Method to fetch the Active Survey by "surveySlug":
     */
    fetchActiveSurvey(serviceSlug) {
      return new Promise((resolve, reject) =&gt; {
        axios.get(`${this.baseURL}/service/${serviceSlug}`, { headers: { Authorization: AuthStr } }).then(response =&gt; {
          resolve(response.data);
        }).catch(error =&gt; {
          if (error.response &amp;&amp; error.response.data.status != 200) {
            Vue.$router.push({ name: 'home'});
          }
        });
      });
    }
  
  </code></pre>
  
  <p>I also have the usual <code>routes.js</code> in the same directory as <code>main.js</code>, which is working fine.</p>
  
  <p>Services are then established as plugins:</p>
  
  <pre><code>import Service from "../services/service/service"; // &lt;= Refrences `service.js`
  
  export default {
    install(Vue) {
      Vue.prototype.$service = Service;
    }
  };
  </code></pre>
  
  <p>I have tried the following:</p>
  
  <p><code>Vue.$router.push({ name: 'home'});</code></p>
  
  <p><code>Vue.prototype.$router.push({ name: 'home'});</code></p>
  
  <p>However, I seem to find that <code>$router</code> is not defined. What would be the best way to define the router push routes from inside this service?</p>