0

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

测试.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 中完成的。另外，我注意到如果我<inertia-link>在父 vue 中使用标签，它就会显示出来。所以标签有效。

（我认为它被默认的 Jetstream 配置文件页面使用）。

4

3 回答 3

1

如果您正在使用来自惯性 js办公站点的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)
  },
})

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

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)
  },
});

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

于 2021-10-26T11:44:49.667 回答
0

我有这个问题，它几乎让我发疯。这就是我想出来的。<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

于 2021-10-08T18:25:30.043 回答
0

首先验证您是否已安装依赖项

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

于 2020-09-18T18:50:03.923 回答