为什么惯性js/vuejs中的链接不是反应式的？

Question

在 laravel8/vuejs3/ziggy 2 应用程序中，我的 resources/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  :

| Illuminate\Auth\Middleware\EnsureEmailIsVerified |
        | GET|HEAD      | profile/index                               | profile.index                  | App\Http\Controllers\Profile\ProfileController@index                  

在资源/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/tightenco/ziggy/dist'), '@Layouts': path.resolve(__dirname, 'resources/js/Layouts') }, }, });

修改版块 2： 在 webpack.mix.js 我修改了别名：

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

我在我的 resources/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 但是链接被切断了。 怎么解决？

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>

然后链接工作正常。