مشکل spa ساختن در ویو
سلام
همانطور که مشخص هست در بحث 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 اخر ایمپورت کن
خیلی ممنون از راهنمایی تون .
چه از لحاظ مالی و چه از سمت وقت نمیتونم دوره ببینم .
سرزنده باشین.
اتفاقا از نظر وقت، قطعا الان دارید وقت بیشتری رو صرف می کنید. مدام به خطاهایی برخورد می کنید که ناشی از ضعف در درک آموزه های اولیه هستند.
حداقل هزینه مالی، دسترسی به اینترنت و دریافت یا تماشای اینترنتی هستش. / اگر زبان تون در حد خوندن زیرنویس انگلیسی هستش، دوره های انگلیسی در دسترس هستند. (دوره فارسی رایگان البته من سراغ ندارم.)