Uncaught TypeError: не удается прочитать «местоположение» свойства неопределенного vue

Я получаю эту ошибку:

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

Файл router.js:

import {createRouter, createWebHistory} from 'vue-router'

const routerHistory = createWebHistory()

const router = createRouter({
  mode: routerHistory,
  routes: [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/todos',
      component: () => import('./views/Todos.vue')
    }
  ]
})

export default router;

Файл main.js

import { createApp } from 'vue'
import App from './App.vue'
import router  from './router.js'

const app = createApp(App)

app.use(router)
app.mount('#app')

Файл App.vue

<template>
  <div id = "nav">
    <router-link to = "/">Home</router-link> |
    <router-link to = "/about">About</router-link>
  </div>
  <router-view/>
</template>

<style>
#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;
}
</style>

Файл Todos.vue:

<template>
  <div>
    <h2>Todo application</h2>
    <router-link to = "/">Home</router-link>
    <hr>
    <AddTodo
        @add-todo = "addTodo"
    />
    <select v-model = "filter">
      <option value = "all">All</option>
      <option value = "completed">Completed</option>
      <option value = "not-completed">Not Completed</option>
    </select>
    <hr>
    <Loader v-if = "loading" />
    <TodoList
        v-else-if = "filteredTodos.length"
        v-bind:todos = "filteredTodos"
        @remove-todo = "removeTodo"
    />
    <p v-else>No todos!</p>
  </div>
</template>

Файл Home.vue

<template>
  <div>
    <h2>Home page</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dignissimos eveniet excepturi expedita impedit numquam quae quas tenetur velit voluptas!</p>

    <router-link to = "/todos">Todos</router-link>
  </div>
</template>

Файл index.html:

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width,initial-scale=1.0">
    <link rel = "icon" href = "<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id = "app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Файл package.json

{
  "name": "web-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.9",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  }
}

vue.js routes

24.12.2020 19:32

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

3 643

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

С vue-router v4 createRouter ожидает `history` param.

Пожалуйста, обратитесь к документам

router.js

import {createRouter, createWebHistory} from 'vue-router'

const routerHistory = createWebHistory()

const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/todos',
      component: () => import('./views/Todos.vue')
    }
  ]
})

export default router;

Я все еще понимаю, вот мой код: codepen.io/PvdH/pen/yLVOWLQ

— 08.02.2021 00:38

Я вижу пустой код шаблона в коде, и вы не включили путь vue и vue-router cdn

— 08.02.2021 05:40

vue-маршрутизатор 4.0.3 и vue 3.0.5. Оба через vue-cli. Итак, vue-router устанавливается через @vue/cli-plugin-router (~4.5.0).

— 08.02.2021 21:18

24.12.2020 20:12