如何从laravel刀片加载vuejs组件？

Question

我有多个auth laravel仪表板。登录默认页面时，将我重定向到客户端仪表板刀片。当我在客户端刀片中写东西时，它什么也没显示。我正在使用vuejs路由器。一切都工作完美。我试图在该刀片中调用组件，但它仍显示为空白。我想重定向到仪表板组件。

控制器：我用返回url（'url here'）尝试了一下，但仍然对我不起作用。

public function index()
    {
        return view('client');
    }

客户端刀片：

@extends('layouts.master')
@section('content')

    <template>
        <div class="container-fluid">
            <client_details></client_details>
        </div>
    </template>

    <script>

        import clientdetails_header from "./clientdetails_header.vue";

        export default {

            data() {

                return {
                }
            },
            components: {
                'client_details': clientdetails_header
            },

            mounted() {
                console.log('Component mounted.')
            }
        }
    </script>

@endsection

Master Blade：

<ul>
  <li>
        <router-link to="/clientdashboard" title="dashboard">
         <span class="nav-link-text"><iclass="fal fa-user"></i>DashBoard</span>
        </router-link>
  </li>
</ul>
<div class="page-wrapper" id="app">
    <div class="page-content">
         <router-view>
         </router-view>
    </div>
</div>

App.js

let routes = [
    {path: '/clientdashboard', component: require('./components/clientdashboard.vue').default},
]

const app = new Vue({
    el: '#app',
    router,

});

const router = new VueRouter({
    mode: "history",
    routes 
})

ClientHeader：

<template>
        <div class="row">
            <div class="col-xl-12">
                <!-- Collapse -->
                <div id="panel-6" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            Client Details
                        </h2>
                    </div>
                    <div class="panel-container show">
                        <div class="panel-content">
                            <div class="row">
                                <div class="col-md-2">
                                    <span><b>Company name:</b></span> <br>
                                    <span><b>Company ABN:</b></span> <br>
                                    <span><b>Company address:</b></span> <br>
                                    <span><b>Company phone:</b></span> <br>
                                    <span><b>Company email:</b></span> <br>
                                </div>
                                <div class="col-md-10">
                                    <ul style="list-style: none;" class="list-group list-group-flush">
                                        <li style="text-decoration: none" v-for="todo in clientData">{{todo}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
    export default {

        data() {
            return {
                user_id: this.$userId,
                clientData: {}
            }
        },
        methods: {
            getClientDetails() {

                axios.post(this.$path + 'api/getClientDetails', null,
                    {
                        params: {
                            'client_id': this.user_id,
                        }
                    })
                    .then(data => (
                        this.clientData = data.data));
            }
        },
        mounted() {
            this.getClientDetails();
            console.log('Component mounted.')
        }
    }
</script>

Answer 1

我认为尝试将Vue代码直接放在刀片中不是一个好主意。

我建议您创建一个Client.vue并将代码放入其中。在您的app.js中全局注册。

Vue.component('client', require('./components/Client'));

然后您可以在客户端刀片中使用该组件。

<client></client>

我相信这将是解决这个问题的第一步。