Javascript 如何将vue js用于某些Laravel路线，将blade用于其他路线？

我试着寻找这个，但似乎找不到答案。这似乎表明，如果要使用blade，则所有视图都必须在blade中，而如果要继续在前端使用vue js，则所有视图都必须在vue中

所以我的问题是，我可以对某些路由使用vue js，对某些路由使用blade吗

例如，假设我有“/login”路由，并且我希望使用Vue js作为该路由的前端，对于“/about”路由，我希望使用Laravel的刀片作为其前端。这可能吗

如果是，怎么做

---

谢谢。

是的，创建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>

示例组件
我是一个示例组件。
导出默认值{
安装的（）{
console.log（'组件已安装'）
}
}

example.blade.php：

@extends('layouts.app')

@section('content')

    <example-component></example-component>

@endsection

@extends（'layouts.app'））
@节（“内容”）
@端部

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

比方说，如果要为resources/js/components/AboutComponent.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>

步骤1：在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');
    }
}

---

您是在谈论使用Vue路由器页面还是只是在页面上嵌入VUEJ？哇，太棒了！谢谢这是正确的解决方案！你没有要求提供分步指南，是的，你扩展了我的答案，但是你仍然使用它来获得最终结果。我花了一些时间来弄清楚你为什么评论这个，我不小心勾选了我的答案作为正确的解决方案。我已经勾选了你的答案作为正确的答案：）
    /**
     * 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',
});

    @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