当我使用 <inertia-link> 标签时，Vue 组件不呈现

Posted 2023-02-23

【中文标题】当我使用 <inertia-link> 标签时，Vue 组件不呈现

【英文标题】：Vue component does not render when I use <inertia-link> tag

【发布时间】：2021-01-05 17:00:03

【问题描述】：

当我使用<inertia-link> 时，test.vue 子组件不会呈现，但如果我删除这些标签，它会呈现。关于我做错了什么有什么想法吗？

test.vue

<template>
    <div>
        <div class="p-6 sm:px-20 bg-white border-b border-gray-200">
            <div>
                <b-logo class="block h-12 w-auto" />
            </div>

            <div class="mt-1 text-2xl">
                 $page.user.first_name   $page.user.last_name 
            </div>

            <inertia-link :href="#">
                test-link
            </inertia-link>

        </div>
    </div>
</template>

<script>
    import BLogo from './BLogo'

    export default 

        components: 
            BLogo,
        ,
    
</script>

此组件在另一个 .vue 文件中使用<my-test />

这是在 laravel 8 中完成的。另外，我注意到如果我在父 vue 中使用 <inertia-link> 标签，它就会显示出来。所以标签有效。

（我认为它被默认的 Jetstream 个人资料页面使用）。

【问题讨论】：

inertia-link 全球注册了吗？任何控制台错误？

你的 :href="#" 属性看起来不正常，因为它试图将 href 属性绑定到表达式 # 的评估，这可能会引发语法错误。您应该会在开发控制台中看到类似的错误消息。

@tony19 是的。它是 laravel 8 的一部分。安装

@RobertNubel 没有错误。

如果您没有看到:href="#" 的错误（这不是有效的绑定），那么您可能会丢失其他错误。我会先尝试解决日志问题，因为控制台日志是一个重要的故障排除工具。

【参考方案1】：

如果您在 inertiajs 办公站点使用以下 Vue3 代码：

import  createApp, h  from 'vue'
import  createInertiaApp  from '@inertiajs/inertia-vue3'

createInertiaApp(
  resolve: name => require(`./Pages/$name`),
  setup( el, App, props, plugin ) 
    createApp( render: () => h(App, props) )
      .use(plugin)
      .mount(el)
  ,
)

然后你必须像这样添加链接组件：

import  createApp, h  from 'vue';
import  createInertiaApp, Link  from '@inertiajs/inertia-vue3';

createInertiaApp(
  resolve: name => require(`./Pages/$name`),
  setup( el, App, props, plugin ) 
    createApp( render: () => h(App, props) )
      .use(plugin)
      .component('inertia-link', Link)
      .mount(el)
  ,
);

在惯性链接组件应该工作之后应该工作。

【讨论】：

遵循 Inertia 文档似乎不起作用，它只是返回了一个错误 [Vue warn]: Failed to resolve component: Link

【参考方案2】：

我遇到了这个问题，几乎让我发疯。这就是我想出来的。 <inertia-link> 是一个自定义链接，Vue 会尝试查找它是否对应于已注册的组件。如果 Vue 没有找到组件，它会标记警告 以下是您需要执行的操作才能解决此问题。

在你的 app.js 中像这样从 Inertia 的 Vue 适配器导入链接

import Link from '@inertiajs/inertia-vue'

在同一个 app.js 中像这样导入 Vue 和 Link 后，将 Link 注册为 Vue 组件

Vue.component('inertia-link', Link)

尝试使用您的模板，应该可以正常工作。

PS:- 我用的是 Vue2

【参考方案3】：

首先验证是否安装了依赖项

npm install @inertiajs/inertia @inertiajs/inertia-vue

或

yarn add @inertiajs/inertia @inertiajs/inertia-vue

初始化应用

接下来，更新您的主 javascript 文件以启动您的 Inertia 应用程序。我们在这里所做的只是使用基本 Inertia 页面组件初始化客户端框架。

import  InertiaApp  from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

const app = document.getElementById('app')

new Vue(
  render: h => h(InertiaApp, 
    props: 
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => require(`./Pages/$name`).default,
    ,
  ),
).$mount(app)

如果您需要代码拆分，请按照以下步骤操作 https://inertiajs.com/client-side-setup#code-splitting

【讨论】：

您好，感谢您的回答。它是 laravel 8 设置的一部分，所以一切都已经安装好了。