laravel - 在 Laravel 中使用 Ziggy for Vue 不断收到“TypeError:无法将类作为函数调用”
问题描述
我已经搜索和搜索,似乎无法找到解决我的问题的方法。
我已采取以下步骤:
\\Webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
},
},
});
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
mix.browserSync('127.0.0.1:8008');
然后在我的 app.js 我有
\\app.js
require('./bootstrap');
import Vue from 'vue'
// Ziggy start here
import route from 'ziggy';
import { Ziggy } from './ziggy';
Vue.mixin({
methods: {
route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
},
});
// ziggy end here
import VendorLoginForm from './vue/components/vendors/auth/VendorLoginForm'
import VendorRegisterForm from './vue/components/vendors/auth/VendorRegisterForm'
import EditVendorProfile from './vue/components/vendors/profile/EditVendorProfile'
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate/dist/vee-validate.full.esm';
extend("password", {
message: "{_field_} must be at least 10 characters long, contain one uppercase, one lowercase, and one number.",
validate: value => {
const strong_password = new RegExp(
"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{10,})"
); // regex to check our strong password
return strong_password.test(value); //Test the regex. Test function returns a true or false value.
}
});
import './scripts/validators'
Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('extend', extend);
const app = new Vue({
el: '#vue-app',
components: { VendorLoginForm, VendorRegisterForm, EditVendorProfile }
});
我已经运行了 php artisan 命令来生成 ziggy.js,当我 Ctrl+单击它时它似乎工作正常。
但是,当我进入我的组件尝试使用如下路线时
mounted() {
console.log(this.route('home.page'))
},
我得到错误:
app.js:51783 TypeError: Cannot call a class as a function
at _classCallCheck (app.js:3612)
at Route (app.js:3630)
at VueComponent.route (app.js:3345)
at VueComponent.mounted (app.cbfbd1ac1b8410f1ce58.hot-update.js:172)
at invokeWithErrorHandling (app.js:51749)
at callHook (app.js:54109)
at Object.insert (app.js:53032)
at invokeInsertHook (app.js:56234)
at VueComponent.patch [as __patch__] (app.js:56453)
at VueComponent.Vue._update (app.js:53838)
解决方案
当我第一次使用 Ziggy 时,这是一场噩梦,但我通过在资源文件夹中创建 ziggy.js 解决了我的问题php artisan ziggy:generate
编辑我的 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 application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),//Note we point to dist folder
},
},
});
然后在 App.js
import route from 'ziggy';
import {
Ziggy
} from './ziggy';
Vue.mixin({
methods: {
route: (name, params, absolute) => route(name, params, absolute, Ziggy)
}
});
然后你可以在你的组件中使用路由
console.log(route("home"));
推荐阅读
- haskell - 在列表理解中组合文本
- javascript - react-native-init 配置文件 - 不确定要编辑哪些绝对导入路径
- visual-studio-code - 如何通过 Fiddler 捕获 Visual Studio Code 流量?
- r - 从具有两列 R 的数据框创建邻接
- python - 如何检查特定元素的复选框?
- php - PHP:文本替换管道(竖线管道)字符
- powershell - 为什么从 catch 块运行时 Invoke-WebRequest 不遵循重定向
- wix - wix bootstrapper 导致 msi 失败
- c++ - 自己的 C++ 列表类实现有问题(插入函数)
- codeigniter - 我的 Codeigniter 会话一经创建就会自动过期