为什么 inertiajs/vuejs 中的 link 不是反应式的？

Question

在 laravel8/vuejs3/ziggy 2 应用程序中，我在 resources/js/Layouts/AppLayout.vue:

中有一个 link 到用户个人资料

    <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 输入附近的图标看到它）。我预计它是反应性的 link。在 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  :

| Illuminate\Auth\Middleware\EnsureEmailIsVerified |
        | GET|HEAD      | profile/index                               | profile.index                  | App\Http\Controllers\Profile\ProfileController@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({ 解决： { 别名：{ 锯齿形：path.resolve('vendor/tightenco/ziggy/dist'), '@Layouts': path.resolve(__dirname, 'resources/js/Layouts') }, }, });

修改后的块 2： 在 webpack.mix.js 我修改了 alias :

mix.webpackConfig({
    resolve: {
        alias: {
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'),
            '@Layouts': path.resolve(__dirname, 'resources/js/Layouts')
        },
    },
});

我在 resources/js/frontend_app.js 中添加了 route an 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 但是 link 只是被切断了。如何解决？

Answer 1

我添加了 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>

然后链接工作正常。

为什么 inertiajs/vuejs 中的 link 不是反应式的？

Why link in inertiajs/vuejs is not reactive?

inertiajs

laravel

vuejs2