laravel - 获取 _ctx.route 不是一个函数

Question

我试图通过在不使用 @routes 的情况下导入 laravel inertiajs 应用程序(VUE3)来使用 ziggy，但我无法使用例如。 route('home').getting ctx.route 不是函数错误.. 请告诉我如何正确放置...
应用程序.js

        require('./bootstrap');

        // Import modules...
        import { createApp, h } from 'vue';
        import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
        import { InertiaProgress } from '@inertiajs/progress';
        import { Link } from '@inertiajs/inertia-vue3'
        import { ZiggyVue } from 'ziggy';
        import { Ziggy } from './ziggy';





        const el = document.getElementById('app');

        createApp({
            render: () =>
                h(InertiaApp, {
                    initialPage: JSON.parse(el.dataset.page),
                    resolveComponent: (name) => require(`./Pages/${name}`).default,
                }),
        })
        .use(InertiaPlugin, Link, ZiggyVue, Ziggy)
        // .mixin({ methods: { route } })
            .mount(el);

        InertiaProgress.init({ color: '#4B5563' });

webpack.mix.js

    const mix = require('laravel-mix');
    const path = require('path');

    /*
    |--------------------------------------------------------------------------
    | Mix Asset Management
    |--------------------------------------------------------------------------
    |
    | Mix provides a clean, fluent API for defining some Webpack build steps
    | for your Laravel applications. By default, we are compiling the CSS
    | file for the application as well as bundling up all the JS files.
    |
    */

    mix.js('resources/js/app.js', 'public/js').vue()
        .postCss('resources/css/app.css', 'public/css', [
            require('postcss-import'),
            require('tailwindcss'),
        ]).alias({
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'), // or 'vendor/tightenco/ziggy/dist/vue' if you're using the Vue plugin
        })
        .webpackConfig(require('./webpack.config'));

    if (mix.inProduction()) {
        mix.version();
    }

索引.vue

    <template>
        <div class="text-blue-800">
            <Link :href="route('about')">ABOUT</Link>
            <div>HALO</div>
        </div>
    </template>

    <script>
        import { Link } from '@inertiajs/inertia-vue3'
        export default {
            components: {
                Link
            }
        }
    </script>

Error I am getting is.

    _ctx.route is not a function

请有人帮助我正确地做...
我不想在主 Blade 文件上使用@routes

Answer 1

首先在终端中运行以下命令

npm i ziggy-js

然后将以下内容复制到您的 app.js 文件中

import {createApp, h} from 'vue'
import {createInertiaApp} from '@inertiajs/inertia-vue3'
import {InertiaProgress} from '@inertiajs/progress'
import route from "ziggy-js";

const el = document.getElementById('app');

createInertiaApp({
    resolve: name => import(`./Pages/${name}`),
    setup({el, App, props, plugin}) {
        createApp({
            render: () => h(App, props)
        })
        .mixin({ methods: { route } })
        .use(plugin)
        .mount(el)
    },
})

InertiaProgress.init({ color: '#4B5563' });

确保从 'ziggy-js' 导入路由，如图所示