laravel - 获取 _ctx.route 不是函数
问题描述
我正在尝试通过在不使用@routes 的情况下导入 laravel 惯性应用程序(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
请有人帮我正确地做...我不想在主刀片文件上使用@routes
解决方案
首先在终端中运行以下命令
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”导入路线,如图所示
推荐阅读
- python - Python 单元测试:如何正确地对内部具有多个 func 调用的函数进行单元测试
- java - 如何退出返回类型为 int[] 的函数?
- powershell - Powershell - 单元格将 Excel 列格式化为小数位
- makefile - 为什么 Makefile 目标依赖于两个目标,但只运行一次?
- laravel - Laravel 中间件路由到不同的控制器
- android - 不要把位置当作固定的;仅立即使用并调用 holder.getAdapterPosition() 稍后查找
- android - 如何通过 mtp(android 内部存储器)运行具有填充依赖项的 exe,而不是将所有文件复制到 pc
- node.js - 如果未定义数组错误,我如何防止这段特定的代码在我的 ejs 文件中运行
- druid - Druid 使用多个维度进行维度提取功能
- go - 如何在 golang 中将直方图添加到 prometheus 导出器?