我收到这个错误:
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>
文件包.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-router v4，createRouter 需要 history 参数。
请引用docs
路由器.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.js - 未捕获的类型错误 : Cannot read property 'location' of undefined vue，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65442062/