Laravel（MPA）中如何结合Vue实现布局与视图路由？

Hey there! I totally get where you’re coming from—making the jump from CodeIgniter to Laravel takes a minute to adjust, especially when adding Vue into the mix. Let’s break this down step by step.

First: Layout & View Structure #

You don’t need to create a new layout file for every page—here’s how Laravel’s blade templating works:

• resources/views/layouts/: This is for your base "master" layouts. Your app.blade.php should be the main template that includes shared elements like your navigation bar, footer, CSS/JS imports, and the @yield('content') directive where page-specific content gets injected. Only create new layout files if you have entirely different page structures (e.g., a separate layout for your admin dashboard vs. the public frontend).
• resources/views/: This is where your page-specific content views live. For every new page, create a blade file here (or organize them into subfolders like views/users/, views/posts/ for better organization) and use @extends('layouts.app') to inherit your base layout. Then fill in the @section('content') block with your page’s content (including Vue components, like your my-button).

Example workflow for a new "user profile" page:

1. Create resources/views/profiles/show.blade.php
2. Add this code:

@extends('layouts.app')

@section('content')
    <div class="profile-container">
        <h1>{{ $user->name }}</h1>
        <user-profile :user="{{ json_encode($user) }}"></user-profile>
        <my-button text="Edit Profile"></my-button>
    </div>
@endsection

3. Set up a route: Route::get('/profile/{user}', 'ProfileController@show');
4. In your controller, pass the user data to the view: return view('profiles.show', compact('user'));

Second: Integrating Vue with Laravel Views #

You’ve already got your first component working—great start! Here are a few key tips to level this up:

1. Register Components Properly #

Make sure your MyButton.vue is registered in resources/js/app.js so Laravel can pick it up:

// resources/js/app.js
require('./bootstrap');

window.Vue = require('vue');

// Register your global component
Vue.component('my-button', require('./components/MyButton.vue').default);

// Initialize the Vue instance
const app = new Vue({
    el: '#app',
});

Don’t forget to compile your assets after making changes: run npm run dev (for one-time builds) or npm run watch (to auto-compile when you edit files).

2. Passing Data from Blade to Vue #

• For simple string data, your current approach works: <my-button text="{{ $text }}"></my-button>
• For complex data (arrays/objects), use Vue’s bind syntax to pass JSON: <user-profile :user="{{ json_encode($user) }}"></user-profile> (the colon : tells Vue this is a JavaScript value, not a string)
• Use Vue slots if you want to pass HTML content into your component:
  In MyButton.vue:

  <template>
    <button class="my-button">
      <slot></slot> <!-- This will render whatever you put inside the component tag -->
    </button>
  </template>
  

  Then in your blade file:

  <my-button>
    <i class="icon"></i> Click Me
  </my-button>
  

3. Page-Specific Vue Apps #

If you have a page that needs more complex Vue functionality (like form submissions, dynamic data loading), you can create a dedicated Vue instance for that page instead of using global components. For example:

1. Create resources/js/pages/ProfilePage.vue
2. In app.js, register it as a component or mount it directly:

// app.js
if (document.getElementById('profile-page')) {
    new Vue({
        el: '#profile-page',
        components: {
            ProfilePage: require('./pages/ProfilePage.vue').default
        }
    });
}

3. In your blade file:

@section('content')
    <div id="profile-page">
        <profile-page :user="{{ json_encode($user) }}"></profile-page>
    </div>
@endsection

Final Notes #

Stick with the standard directory structure you have—it’s designed to keep your code organized. Focus on reusing your base layout for most pages, and only create new layouts when absolutely necessary. For Vue, start with global components for simple UI elements (like buttons, cards) and move to page-specific Vue apps as your complexity grows.

内容的提问来源于stack exchange，提问作者HardReset