我想使用VueRouter创建一个vue应用程序
我的main.js文件看起来像这样:
import VueRouter from "vue"
import MyApp2 from "./MyApp2.vue"
import { createApp } from "vue"
import { createWebHashHistory } from "vue-router"
// 1. Define route components.
// These can be imported from other files
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: createWebHashHistory(),
routes, // short for `routes: routes`
})
const app = createApp(MyApp2)
app.use(router)
app.mount('#app')
MyApp2.vue看起来像这样:
<template>
<h1>Hello App!</h1>
<p>
<!-- use the router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</template>
<script>
export default {
name: 'MyApp2'
}
</script>
我的package.json文件看起来像这样:
{
"name": "uebungsseite",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.2.3",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-tree-navigation": "^4.0.1",
"vue-router": "^4.2.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
我已经运行了命令
npm install
如果我跑了
npm run serve
我转到http://localhost:8080/,然后看到错误
vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
at eval (webpack-internal:///./src/main.js:33:16)
at ./src/main.js (http://localhost:8080/js/app.js:39:1)
at __webpack_require__ (http://localhost:8080/js/app.js:103:33)
at http://localhost:8080/js/app.js:1224:109
at __webpack_require__.O (http://localhost:8080/js/app.js:149:23)
at http://localhost:8080/js/app.js:1225:53
at http://localhost:8080/js/app.js:1227:12
我的main.js的第33行是空的,所以我不知道这个错误消息告诉我什么。
1条答案
按热度按时间kcrjzv8t1#
在Vue Router 4中,你必须使用
createRouter
函数而不是VueRouter
构造函数来初始化它: