Laravel+Vue.js中router-view无法渲染组件问题求助

Hey there, I’ve worked through this exact chapter from Anthony Gore’s Full-Stack Vue.js 2 and Laravel 5 before, so let’s break down why your ListingPage component isn’t showing up in the router-view and fix it step by step:

1. Check Your Laravel Blade View (app.blade.php) #

This is the most common gotcha. If your blade view isn’t set up correctly, Vue can’t mount properly, and the router-view will never render anything.

• Verify your app.blade.php has these critical pieces:

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>Vuebnb</title>
      <link rel="stylesheet" href="{{ mix('css/app.css') }}">
  </head>
  <body>
      <!-- This must match the `el` in your Vue instance (you used #app) -->
      <div id="app"></div>
      <!-- Load the compiled app.js using mix to ensure correct asset paths -->
      <script src="{{ mix('js/app.js') }}"></script>
  </body>
  </html>
  

• If any part is missing, add it, then re-run npm run dev to recompile your assets.

2. Fix Laravel Routing for Vue Router’s History Mode #

Since you’re using Vue Router’s history mode, Laravel needs a fallback route to ensure all frontend routes serve the app view (even when users refresh the page or directly visit a URL like /listing/5).

• Add this fallback route at the END of web.php:

  // Catch all non-API, non-defined routes and return the app view
  Route::get('/{any}', function () {
      return view('app');
  })->where('any', '.*');
  

  Important: This must come after your existing /listing/{listing} route—otherwise it’ll override your Laravel route that passes the listing model.

3. Double-Check Component Import Paths & Filenames #

On Linux/macOS, file names are case-sensitive, which trips up a lot of people.

• Confirm router.js imports the component correctly:

  // Make sure the path matches your actual file structure
  // And that the filename matches exactly (e.g., ListingPage.vue, not listingpage.vue)
  import ListingPage from '../components/ListingPage';
  

• Verify ListingPage.vue exists in resources/assets/js/components/ (or whatever path you’re using).

4. Ensure Router is Properly Injected into the Vue Instance #

Your app.js looks right, but let’s confirm you’re not missing anything critical:

• Confirm your app.js code:

  import Vue from 'vue';
  import router from './router';
  import App from '../components/App.vue';
  
  new Vue({
      el: '#app',
      render: h => h(App),
      router // This line is mandatory—without it, router-view won't work!
  });
  

  The router property must be present here to pass the router instance to your root App component.

5. Check Browser Console for Errors #

Open your browser’s dev tools (F12) and look at the Console tab—error messages will point you straight to the problem:

• If you see Failed to mount component: template or render function not defined: Your component path is wrong, or the component’s template has syntax errors.
• If you see Unknown custom element: <router-view>: Vue Router wasn’t registered properly, or the router wasn’t injected into the Vue instance.

Work through these steps one by one, and you’ll get that ListingPage rendering in no time.

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