Question

我收到此错误：

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"
  }
}

Answer 1

使用 vue-router v4，createRouter 需要 `history` 参数。

请参考docs

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;

未捕获的类型错误：无法读取未定义的 vue 的属性“位置”

1 个答案:

使用 vue-router v4，createRouter 需要 `history` 参数。

未捕获的类型错误：无法读取未定义的 vue 的属性“位置”

1 个答案:

使用 vue-router v4，createRouter 需要 history 参数。

使用 vue-router v4，createRouter 需要 `history` 参数。