跟着黑马视频做电商项目管理实战时,用vue配置路由router运行时,浏览器报错Cannot read properties of undefined (reading ‘use’)
项目中main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
createApp(App).use(router).mount('#app')
router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
常见解决方法:
将createApp(App).use(router).mount(‘#app’)这行代码替换为下面3行代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//createApp(App).use(router).mount('#app')
const app = createApp(App)
app.use(router)
app.mount('#app')
但对我没用,最终将import './plugins/element.js’这行代码注释掉,成功运行项目
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//import './plugins/element.js'
createApp(App).use(router).mount('#app')