title: vue.js this.$router undefined
body: <p>I am getting undefined for </p>
  
  <blockquote>
    <p>this.$router</p>
  </blockquote>
  
  <p>undefined in App.vue and other components. I couldn't find a solution. </p>
  
  <p>here a part of my main.js </p>
  
  <pre><code>Vue.use(VueRouter);
  Vue.use(VueResource);
  
  const router = new VueRouter({
      routes: Routes,
      mode: 'history'
  });
  
  new Vue({
      el: '#app',
      render: h =&gt; h(App),
      router
  });
  </code></pre>
  
  <p>and here my router.js which I am importing in main.js.</p>
  
  <pre><code>export default [
      {path: '/', component: Home, name: 'home'},
      {path: '/home', component: Home, name: 'home2'},
      {path: '/user/login', component: Login, name: 'userLogin'}
  ];
  </code></pre>
  
  <p>Thank you :)</p>
  
  <h2>Edit</h2>
  
  <p>I was using it in script tags like this,</p>
  
  <pre><code>&lt;script&gt;
      import HeadNavBar from './components/HeadNavBar.vue';
      import SideBarNav from './components/SideBarNav.vue';
      import Home from './components/Home.vue';
  
  
      console.log(this.$router,pus); //the undefined type
  
      export default {
          name: 'app',
          data() {
              return {
                  isLogin: true
              }
          },
          components: {
              'app-headnav': HeadNavBar,
              'app-sidebarnav': SideBarNav,
              'app-home': Home
          }
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>but when I moved it into the method section, I got the response I wanted.</p>
  
  <pre><code>export default {
      name: 'app',
      data() {
          return {
              isLogin: true
          }
      },
      components: {
          'app-headnav': HeadNavBar,
          'app-sidebarnav': SideBarNav,
          'app-home': Home
      },methods: {
          myFunc: function() {
              console.log(this.$router,pus); // this gave result
          }
      }
  }
  </code></pre>