Question

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

控制器：我尝试使用return 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代码直接放在刀片中不是一个好主意。

我建议您创建一个proxies = [] url = 'https://www.sslproxies.org/' htmlContent = requests.get(url) soup = BeautifulSoup(htmlContent.text, 'html.parser') proxies_table = soup.find(id='proxylisttable') for row in proxies_table.tbody.find_all('tr'): proxies.append( row.find_all('td')[0].string+ ':'+ row.find_all('td')[1].string ) response = requests.get('https://httpbin.org/ip',proxies={"https": proxies[<any index>]}) print(response.json())并将代码放入其中。在app.js中的路由中注册它。

Client.vue

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

...
{path: '/client', component: require('./components/Client.vue')},

我认为这将是解决此问题的第一步。

Answer 2

在Blade.php的<head>部分中加载app.js

<script src="{{ asset('js/app.js') }}" async></script>\

还在那里创建一个具有id应用程序的div。

<body>
    <div id="app"></div>
</body>

创建App.vue

<template>
  <div>
    <router-view />
  </div>
</template>

<style scoped lang="scss">
</style>

转到resources / js / app.js文件，您将看到laravel已经在其中放置了实例化vue的代码。注册您的路线等。

但是对我来说，我创建了一个新的文件夹resources / js / vue，将所有与vue相关的文件（组件，路由，过滤器，vuex，mixins，指令）放在其中，创建index.js并移动了代码以在内部启动vue index.js。

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import components from './components'
import directives from './directives'
import mixins from './mixins'
import filters from './filters'

Vue.use(router)
Vue.use(store)
Vue.use(components)
Vue.use(directives)
Vue.use(mixins)
Vue.use(filters)

new Vue({ router, store, render: h => h(App) }).$mount('#app')

export default {}

resources / js / app.js

require('./vue')
// I also initiate service-worker, firebase, and other non vue related
// javascripts in this file

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

2 个答案: