如何解决当我使用<inertia-link>标签时,Vue组件不会呈现
当我使用<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>
此组件与<my-test />
一起在另一个.vue文件中使用
这是在laravel 8中完成的。此外,我注意到,如果我在父Vue中使用<inertia-link>
标签,则会显示出来。因此该标签有效。
(我认为默认Jetstream配置文件页面会使用它。)
解决方法
首先验证您是否已安装依赖项
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。