یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها

استفاده از تخفیف‌ها
ثانیه
دقیقه
ساعت
روز
علیرضا کفایتی
3 سال پیش توسط علیرضا کفایتی مطرح شد
12 پاسخ

مشکل 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


ثبت پرسش جدید
مهدی صفری
تخصص : برنامه نویس php
@mahdisafarydev 3 سال پیش مطرح شد
0
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 اخر ایمپورت کن


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش آپدیت شد
0

یک دوره رو بشینید و تماشا کنید، وگرنه در غیر اینصورت مدام مجبور به پرسش های ابتدایی هستید. پاسخگویی هم سخت میشه.


فکر می کنم خطا به این خاطر باشه که نیاز به createRouter ای که نوشتید نیست.

const routers = [
    { path: '/', component: Home },
    { path: '/live', component: Live },
    { path: '/درباره-مسجد', component: About },
]

https://next.router.vuejs.org/guide/#javascript


علیرضا کفایتی
تخصص : برنامه نویس laravel, vue.js
@alirezakefayati 3 سال پیش مطرح شد
0

@milad
سلام
ممنون ، آره واقعا خوندن داکیومنت سخت هست و مشکلات اینجوری زیاد داره ...


علیرضا کفایتی
تخصص : برنامه نویس laravel, vue.js
@alirezakefayati 3 سال پیش مطرح شد
0

متاسفانه مشکل حل نشد و همون ارور برقرار هست .

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

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
0

متاسفانه تشخیص ندادم خطا از چی می تونه باشه.

ممنون ، آره واقعا خوندن داکیومنت سخت هست و مشکلات اینجوری زیاد داره ...

به نظرم این خطای مشهودی هستش که بخوایم از روی مستندات، چیزی رو یاد بگیریم.
یک دوره آموزشی تصویری رو مشاهده کنید، مستندات برای مراجعات بعدی می تونه مفید باشه، نه برای آموزش اولیه.


علیرضا کفایتی
تخصص : برنامه نویس laravel, vue.js
@alirezakefayati 3 سال پیش مطرح شد
0

@milad
خیلی ممنون از راهنمایی تون .
چه از لحاظ مالی و چه از سمت وقت نمیتونم دوره ببینم .


مهدی صفری
تخصص : برنامه نویس php
@mahdisafarydev 3 سال پیش مطرح شد
0

خیلی راحته داخل فایل app.vue تگ template فقط می تونه یک فرزند بگیره و دوتا نمی تونه


علیرضا کفایتی
تخصص : برنامه نویس laravel, vue.js
@alirezakefayati 3 سال پیش مطرح شد
0

@mahdisafarydev
من اصلا فرزندی هنوز بهش ندادم !


مهدی صفری
تخصص : برنامه نویس php
@mahdisafarydev 3 سال پیش مطرح شد
0
<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>

این کد رو تست کن


علیرضا کفایتی
تخصص : برنامه نویس laravel, vue.js
@alirezakefayati 3 سال پیش مطرح شد
0

حل نشد متاسفانه ...
میتونم بپرسم خود ارور داره چه میگه ؟


مهدی صفری
تخصص : برنامه نویس php
@mahdisafarydev 3 سال پیش مطرح شد
0
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 اخر ایمپورت کن


علیرضا کفایتی
تخصص : برنامه نویس laravel, vue.js
@alirezakefayati 3 سال پیش مطرح شد
0

خیلی جالبه پروژه رو برگردوندم به حالت اول باز هم کار می کنه 😂


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
1

خیلی ممنون از راهنمایی تون .
چه از لحاظ مالی و چه از سمت وقت نمیتونم دوره ببینم .

سرزنده باشین.
اتفاقا از نظر وقت، قطعا الان دارید وقت بیشتری رو صرف می کنید. مدام به خطاهایی برخورد می کنید که ناشی از ضعف در درک آموزه های اولیه هستند.
حداقل هزینه مالی، دسترسی به اینترنت و دریافت یا تماشای اینترنتی هستش. / اگر زبان تون در حد خوندن زیرنویس انگلیسی هستش، دوره های انگلیسی در دسترس هستند. (دوره فارسی رایگان البته من سراغ ندارم.)


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام