在laravel8/vuejs3/ziggy 2应用程序中，我的资源/js/Layouts/AppLayout.vue:中有一个指向用户配置文件的链接
<template v-if="$page.props.user">
<span class="capitalize">Welcome,</span>
<span class="ml-1">
<a :href="route('profile.index') ">
{{ $page.props.user.first_name }} {{ $page.props.user.last_name }}
</a>
</span>
</template>
但当我点击这个页面时，所有页面都会被重新加载(我通过浏览器url输入附近的图标看到它(。我原以为这是一个被动环节。在routes/web.php中，我有：
Route::middleware([ 'auth' ,'verified'])->prefix('profile')->group(function() {
Route::get('index', [ProfileController::class, 'index'])->name('profile.index');
and I see in output of php artisan route:list :
| IlluminateAuthMiddlewareEnsureEmailIsVerified |
| GET|HEAD | profile/index | profile.index | AppHttpControllersProfileProfileController@index
在resources/js/frontend_app.js:中
require('./bootstrap');
console.log('frontend_app.js::')
import { InertiaProgress } from '@inertiajs/progress';
import { createApp, h } from 'vue'
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel 0987';
import route from "ziggy";
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mixin({ methods: { route } })
.component('inertia-link', Link)
.mount(el)
},
})
InertiaProgress.init({ color: '#4B5563' });
哪种方法是正确的，我必须使用哪些方法？
谢谢！
"require": {
"php": "^7.3|^8.0",
"fideloper/proxy": "^4.2",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"inertiajs/inertia-laravel": "^0.4.5",
"jenssegers/date": "^4.0",
"laravel/fortify": "^1.8",
"laravel/framework": "^8.0",
"laravel/telescope": "^4.6",
"laravel/tinker": "^2.0",
"mews/purifier": "^3.3",
"proengsoft/laravel-jsvalidation": "^4.5.1",
"spatie/laravel-medialibrary": "^9.9",
"spatie/laravel-permission": "^5.4",
"tightenco/ziggy": "^1.4",
"laravel/jetstream": "^2.4",
"wboyz/laravel-enum": "^0.2.1"
修改块：
无法导入路由方法：我不得不转到vuejs2，因为我在vuejs3中的一些组件工作中遇到了一些问题。
在resources/js/frontend_app.js中，我现在有：
import Vue from 'vue'
import axios from 'axios'
axios.defaults.crossDomain = true
import 'font-awesome/css/font-awesome.css'
Vue.config.productionTip = false
Window.axios = axios
import { createInertiaApp } from '@inertiajs/inertia-vue'
import route from "ziggy";
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props }) {
new Vue({
render: h => h(App, props),
}).$mount(el)
.use(route)
},
})
我还尝试在AppLayout.vue文件中设置导入：
<template >
<Link :href="$route('profile.index')">222Profile</Link>
</template>
...
import route from 'ziggy';
export default {
components: {
route
...
},
但我错了：
[Vue warn]: Property or method "route" is not defined on the instance but referenced during render.
如何修复？
同样在webpack.mix.js中，我有：mix.webpackConfig({解决：{别名：{ziggy:path.resolve('vendor/stretenco/ziggy/dist'(，"@Layouts"：path.resolve(__dirname，"resources/js/Layments"(}，}，})；
修改区块2:在webpack.mix.js中，我修改了别名：
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'),
'@Layouts': path.resolve(__dirname, 'resources/js/Layouts')
},
},
});
我在我的资源/js/frontend_app.js:中添加了路由ziggy支持
import Vue from 'vue'
import axios from 'axios'
axios.defaults.crossDomain = true
import 'font-awesome/css/font-awesome.css'
Vue.config.productionTip = false
Window.axios = axios
import { createInertiaApp } from '@inertiajs/inertia-vue'
import route from "ziggy";
import { ZiggyVue, Ziggy } from 'ziggy';
Vue.use(ZiggyVue, Ziggy, route);
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props }) {
new Vue({
render: h => h(App, props),
}).$mount(el)
},
})
并且作为具有vue模板的结果：
<template v-if="$page.props.user">
<span class="capitalize">Welcome,</span>
<span class="ml-1">
111111<Link :href="route('profile.index') ">Profile A B C</Link>333333
</span>
</template>
我在控制台中看到这个块：https://prnt.sc/24aegvg但链接被切断了。如何修复？
我添加了resources/js/frontend_app.js行：
import { createInertiaApp, Link } from '@inertiajs/inertia-vue'
Vue.component('inertia-link', Link)
在我的模板中：
<inertia-link :href="route('profile.index') ">{{ $page.props.user.name}}</inertia-link>
那么链接工作正常。