title: Uncaught TypeError: Cannot read property 'location' of undefined vue
body: <p>I get this error:</p>
  <pre><code>vue-router.esm-bundler.js?6c02:3265 Uncaught TypeError: Cannot read property 'location' of undefined
  at Object.install (vue-router.esm-bundler.js?6c02:3265)
  at Object.use (runtime-core.esm-bundler.js?5c40:2948)
  at eval (main.js?56d7:7)
  at Module../src/main.js (app.js:1088)
  at __webpack_require__ (app.js:854)
  at fn (app.js:151)
  at Object.1 (app.js:1113)
  at __webpack_require__ (app.js:854)
  at checkDeferredModules (app.js:46)
  at app.js:994
  </code></pre>
  <p>File router.js:</p>
  <pre><code>import {createRouter, createWebHistory} from 'vue-router'
  
  const routerHistory = createWebHistory()
  
  const router = createRouter({
    mode: routerHistory,
    routes: [
      {
        path: '/',
        component: () =&gt; import('./views/Home.vue')
      },
      {
        path: '/todos',
        component: () =&gt; import('./views/Todos.vue')
      }
    ]
  })
  
  export default router;
  </code></pre>
  <p>File main.js</p>
  <pre><code>import { createApp } from 'vue'
  import App from './App.vue'
  import router  from './router.js'
  
  const app = createApp(App)
  
  app.use(router)
  app.mount('#app')
  </code></pre>
  <p>File App.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;nav&quot;&gt;
      &lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt; |
      &lt;router-link to=&quot;/about&quot;&gt;About&lt;/router-link&gt;
    &lt;/div&gt;
    &lt;router-view/&gt;
  &lt;/template&gt;
  
  &lt;style&gt;
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  
  #nav {
    padding: 30px;
  }
  
  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }
  
  #nav a.router-link-exact-active {
    color: #42b983;
  }
  &lt;/style&gt;
  </code></pre>
  <p>File Todos.vue:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h2&gt;Todo application&lt;/h2&gt;
      &lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt;
      &lt;hr&gt;
      &lt;AddTodo
          @add-todo=&quot;addTodo&quot;
      /&gt;
      &lt;select v-model=&quot;filter&quot;&gt;
        &lt;option value=&quot;all&quot;&gt;All&lt;/option&gt;
        &lt;option value=&quot;completed&quot;&gt;Completed&lt;/option&gt;
        &lt;option value=&quot;not-completed&quot;&gt;Not Completed&lt;/option&gt;
      &lt;/select&gt;
      &lt;hr&gt;
      &lt;Loader v-if=&quot;loading&quot; /&gt;
      &lt;TodoList
          v-else-if=&quot;filteredTodos.length&quot;
          v-bind:todos=&quot;filteredTodos&quot;
          @remove-todo=&quot;removeTodo&quot;
      /&gt;
      &lt;p v-else&gt;No todos!&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>File Home.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h2&gt;Home page&lt;/h2&gt;
  
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dignissimos eveniet excepturi expedita impedit numquam quae quas tenetur velit voluptas!&lt;/p&gt;
  
      &lt;router-link to=&quot;/todos&quot;&gt;Todos&lt;/router-link&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>File index.html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;icon&quot; href=&quot;&lt;%= BASE_URL %&gt;favicon.ico&quot;&gt;
      &lt;title&gt;&lt;%= htmlWebpackPlugin.options.title %&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;noscript&gt;
        &lt;strong&gt;We're sorry but &lt;%= htmlWebpackPlugin.options.title %&gt; doesn't work properly without JavaScript enabled. Please enable it to continue.&lt;/strong&gt;
      &lt;/noscript&gt;
      &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
      &lt;!-- built files will be auto injected --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>File package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;web-ui&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
      &quot;build&quot;: &quot;vue-cli-service build&quot;
    },
    &quot;dependencies&quot;: {
      &quot;core-js&quot;: &quot;^3.6.5&quot;,
      &quot;vue&quot;: &quot;^3.0.0&quot;,
      &quot;vue-router&quot;: &quot;^4.0.0-0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@vue/cli-plugin-babel&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-router&quot;: &quot;^4.5.9&quot;,
      &quot;@vue/cli-service&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/compiler-sfc&quot;: &quot;^3.0.0&quot;
    }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/gFzby.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gFzby.png" alt="enter image description here" /></a></p>