title: VueJS route is undefined
body: <p>I'm trying to render my vue components inside the <code>router-view</code> tag. But it gives me an error</p>
  
  <blockquote>
    <p>TypeError: route is undefined</p>
  </blockquote>
  
  <p>But I didn't use the word <code>route</code> in anywhere. This is my code.</p>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;my-header&gt;&lt;/my-header&gt;
  
      &lt;router-view&gt;&lt;/router-view&gt;
  
      &lt;my-footer&gt;&lt;/my-footer&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>outerroutes.js</strong></p>
  
  <pre><code>import welcome from './components/welcome.vue';
  import insideSystem from './components/insideSystem.vue';
  import forgotPassword from './components/forgotPassword.vue';
  
  export const routes = [
    {path:'',component:welcome},
    {path:'/insideSystem',component:insideSystem},
    {path:'/forgotPassword',component:forgotPassword}
  
  ];
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  import VueRouter from 'vue-router'
  
  import {routes} from './outerroutes';
  Vue.use(VueRouter);
  
  const router = new VueRouter({
    routes,
    mode:'history'
  });
  
  new Vue({
    el: '#app',
    routes,
    render: h =&gt; h(App)
  })
  </code></pre>
  
  <p>I'm wondering where is this <code>route</code> came from.</p>