سلام
همانطور که مشخص هست در بحث vuejs بسیار مبتدی هستم و میدونم که سوالاتم ابتدایی هست .
ارور زیر چی میگه دقیقا و مشکل از کجا است ؟
متن ارور :
Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
at createRouterMatcher (vue-router.esm-bundler.js?6c02:1475)
at createRouter (vue-router.esm-bundler.js?6c02:2805)
at eval (router.js?41cb:6)
at Module../src/router.js (app.js:1235)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (main.js:12)
at Module../src/main.js (app.js:1223)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
createRouterMatcher @ vue-router.esm-bundler.js?6c02:1475
createRouter @ vue-router.esm-bundler.js?6c02:2805
eval @ router.js?41cb:6
./src/router.js @ app.js:1235
__webpack_require__ @ app.js:849
fn @ app.js:151
eval @ main.js:12
./src/main.js @ app.js:1223
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:1248
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928
فایل App.vue :
<template>
<h1>mfaegh.ir</h1>
<router-link to="/">Home page</router-link>
<router-link to="/about">Home page</router-link>
<router-link to="/live">Home page</router-link>
<hr>
<router-view></router-view>
</template>
<script>
export default {
setup(){
return {};
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
فایل 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')
فایل router.js :
import { createRouter, createWebHashHistory } from "vue-router"
import Home from "./components/Home.vue"
import Live from "./components/Live.vue"
import About from "./components/About.vue"
const routers = createRouter([
{ path: '/', component: Home },
{ path: '/live', component: Live },
{ path: '/درباره-مسجد', component: About },
])
const router = createRouter({
history: createWebHashHistory(),
routers
})
export default router
اگر فایل های دیگر هم لازم بود در اختیارتون می گذارم .
پیشاپیش از راهنمایی هاتون ممنون هستم .
@milad
import { createRouter, createWebHistory } from 'vue-router'
import Index from '../views/index.vue'
import About from '../views/about.vue'
const routes = [
{
path: "/",
name: "Index",
component: Index
},
{
path:"/about",
name: "About",
component: About
}
]
let router = createRouter({
history: createWebHistory(),
routes,
})
export default router;
روت ها رو اینجوری درست کن و اینکه فایل های جاوااسکریپت رو بدون .js اخر ایمپورت کن
یک دوره رو بشینید و تماشا کنید، وگرنه در غیر اینصورت مدام مجبور به پرسش های ابتدایی هستید. پاسخگویی هم سخت میشه.
فکر می کنم خطا به این خاطر باشه که نیاز به createRouter ای که نوشتید نیست.
const routers = [
{ path: '/', component: Home },
{ path: '/live', component: Live },
{ path: '/درباره-مسجد', component: About },
]
متاسفانه مشکل حل نشد و همون ارور برقرار هست .
import { createRouter, createWebHashHistory } from "vue-router"
import Home from "./components/Home.vue"
import Live from "./components/Live.vue"
import About from "./components/About.vue"
const routers = [
{ path: '/', component: Home },
{ path: '/live', component: Live },
{ path: '/درباره-مسجد', component: About },
]
const router = createRouter({
history: createWebHashHistory(),
routers
})
export default router
متاسفانه تشخیص ندادم خطا از چی می تونه باشه.
ممنون ، آره واقعا خوندن داکیومنت سخت هست و مشکلات اینجوری زیاد داره ...
به نظرم این خطای مشهودی هستش که بخوایم از روی مستندات، چیزی رو یاد بگیریم.
یک دوره آموزشی تصویری رو مشاهده کنید، مستندات برای مراجعات بعدی می تونه مفید باشه، نه برای آموزش اولیه.
<template>
<div>
<h1>mfaegh.ir</h1>
<router-link to="/">Home page</router-link>
<router-link to="/about">Home page</router-link>
<router-link to="/live">Home page</router-link>
<hr>
<router-view></router-view>
</div>
</template>
این کد رو تست کن
import { createRouter, createWebHistory } from 'vue-router'
import Index from '../views/index.vue'
import About from '../views/about.vue'
const routes = [
{
path: "/",
name: "Index",
component: Index
},
{
path:"/about",
name: "About",
component: About
}
]
let router = createRouter({
history: createWebHistory(),
routes,
})
export default router;
روت ها رو اینجوری درست کن و اینکه فایل های جاوااسکریپت رو بدون .js اخر ایمپورت کن
خیلی ممنون از راهنمایی تون .
چه از لحاظ مالی و چه از سمت وقت نمیتونم دوره ببینم .
سرزنده باشین.
اتفاقا از نظر وقت، قطعا الان دارید وقت بیشتری رو صرف می کنید. مدام به خطاهایی برخورد می کنید که ناشی از ضعف در درک آموزه های اولیه هستند.
حداقل هزینه مالی، دسترسی به اینترنت و دریافت یا تماشای اینترنتی هستش. / اگر زبان تون در حد خوندن زیرنویس انگلیسی هستش، دوره های انگلیسی در دسترس هستند. (دوره فارسی رایگان البته من سراغ ندارم.)
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟