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

Posted 2023-03-16

【中文标题】为啥惯性js/vuejs中的链接不是反应式的？

【英文标题】：Why link in inertiajs/vuejs is not reactive?为什么惯性js/vuejs中的链接不是反应式的？

【发布时间】：2022-01-23 09:59:04

【问题描述】：

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

【问题讨论】：

您需要使用惯性链接，而不是<a> 标签。类似：<Link :href="route('profile.index') ">Profile</Link> 确保导入链接组件

请阅读修改块

【参考方案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>

然后链接工作正常。