如何将 vue js 用于某些 Laravel 路由，而将刀片用于其他路由？

Question

我已尝试搜索此问题，但似乎找不到此问题的答案。它似乎表明如果您要使用刀片，那么您的所有视图都必须在刀片中，而如果您要继续在前端使用 vue js，那么每个视图都必须在 Vue 中。

所以我的问题是我可以将 vue js 用于某些路由，而将刀片用于某些路由吗？

举个例子，假设我有'/login' 路由并且我想在这条路由的前端使用Vue js，而对于'/about' 路由，我想使用Laravel 的刀片作为它的前端。这可能吗？

如果是，怎么做？

谢谢。

Answer 1

是的，创建 Vue 组件并从刀片模板中调用它们：-

ExampleComponent.vue：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

example.blade.php:

@extends('layouts.app')

@section('content')

    <example-component></example-component>

@endsection

Answer 2

感谢@chris 的回答，不过我想扩展这个答案。

假设你想为 resources/js/components/AboutComponent.vue 中的新组件注册一个

第一步：在web.php中注册路由

Route::get('contact', 'TestController@contact')->middleware('auth');

第 2 步：创建控制器并指向刀片

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TestController extends Controller
{

    public function contact()
    {
        return view('testing.contact');
    }
}

//第三步：在resources/js/components/ContactComponent.vue中创建vue组件

<template>
    <div class="col-md-12">
        <p>Brought to you by Evan You</p>
    </div>
</template>
<script>
export default {
    data() {
        return {

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

//第四步在resources/js/app.js中注册Vue组件

    /**
     * First we will load all of this project's JavaScript dependencies which
     * includes Vue and other libraries. It is a great starting point when
     * building robust, powerful web applications using Vue and Laravel.
     */
    
    require('./bootstrap');
    
    window.Vue = require('vue');
    
    /**
     * The following block of code may be used to automatically register your
     * Vue components. It will recursively scan this directory for the Vue
     * components and automatically register them with their "basename".
     *
     * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
     */
    
    // const files = require.context('./', true, /\.vue$/i)
    // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
    
Vue.component('contact-component', require('./components/ContactComponent.vue').default);
    
    /**
     * Next, we will create a fresh Vue application instance and attach it to
     * the page. Then, you may begin adding components to this application
     * or customize the JavaScript scaffolding to fit your unique needs.
     */

const app = new Vue({
    el: '#app',
});

// 第5步在resources/views/testing/contact.blade.php中的contact.blade.php中使用这个组件

    @extends('layouts.app')
    @section('content')
    <div class="container">
        <h2>From the vue component</h2>
{{-- This is the vue component that we registered in app.js --}}
        <contact-component></contact-component>
    </div>
    <div class="container">
        <div class="col-md-12">
            <h2>From the blade component</h2>
            <p>Brought to you by Taylor Otwell</p>
        </div>
    </div>
    @endsection

//第6步不要忘记运行npm run watch

结果：