اذهب إلى المحتوى

السؤال

نشر

أحاول تطوير نسخة مشروع مبني باستخدام Laravel و Vue JS إلى لارافيل 8، ولكن عند تنفيذ:

npm run dev

يظهر لدي هذا الخطأ:

app.js:44258 Uncaught ReferenceError: route is not defined

حاولت تتبع الخطأ فلاحظت وجود خط أحمر على السطر التالي:

Vue.mixin({ methods: { route } });

ولكن لم استطع تحديد المشكلة أو كيفية حلها

Recommended Posts

  • 1
نشر

قد يحدث تضارب عند تحديث النسخة إلى 8 مع blade في استخدام routes خاصةً في حال تم اختيار Jetstream

لحل هذه المشكلة أولاً يمكن إنشاء مجلد resources كالتالي:

composer require tightenco/ziggy
npm install ziggy-js
php artisan ziggy:generate "resources/js/ziggy.js"

ثم يجب تعديل ملف webpack.mix.js:

mix.js('resources/js/app.js', 'public/js')
    
    .webpackConfig(require('./webpack.config'));

وأيضاً الملف ./webpack.config: لكي يتم التعرف على المسارات routes:

const path = require('path');
module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
            ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
        },
    },
};

وأخيراً ضمن الملف app.js:

import route from 'ziggy';
import {
    Ziggy
} from './ziggy';
...
Vue.mixin({
    methods: {
        route: (name, params, absolute) => route(name, params, absolute, Ziggy),
    },
});
...
new Vue({
    el: "#app",
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),

});

وبذلك يتم الاستغناء عن vue-router ويتم أخذ jetstreams ليصبح توجيه المسارات من قبل Laravel

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...