Vue-router与Laravel路由内容不显示问题求助

我来帮你排查这个问题！从你贴的代码来看，大概率是前端资源编译或者Vue实例挂载方式的小问题，我们一步步来解决：

第一步：确保前端资源已正确编译 #

很多时候跟着教程操作容易忽略这一步——你需要运行编译命令，让Laravel Mix把你的Vue和路由代码打包到可执行的文件里：

npm run dev

如果是开发过程中想要实时编译，用：

npm run watch

执行完后，刷新页面再看看ExampleComponent能不能正常显示。

第二步：调整Vue实例的挂载方式（推荐标准写法） #

你的当前写法是把App组件注册为根Vue实例的子组件，虽然理论上可行，但有时候会出现路由上下文的问题。我们改成更标准的根组件挂载方式：

修改app.js： #

import Vue from 'vue';
import router from './router';
import App from './components/App';
require('./bootstrap');

const app = new Vue({
    el: '#app',
    router,
    // 用render函数直接把App作为根组件挂载
    render: h => h(App)
});

修改app.blade.php： #

把<App></App>标签去掉，只保留挂载容器：

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

第三步：检查浏览器控制台的错误信息 #

如果上面两步做完还是不行，打开浏览器的开发者工具（按F12），切换到「Console」标签页，看看有没有红色的报错提示。比如：

• 如果提示Unknown custom element: <router-view>，说明VueRouter没有正确注册，你可以再检查router.js里的Vue.use(VueRouter)是否写对，以及app.js是否正确导入了router。
• 如果提示找不到ExampleComponent，那可能是组件的路径写错了，确认router.js里的import ExampleComponent from './components/ExampleComponent'路径是否和实际文件位置一致。

额外检查：确认History模式的后端配置 #

你在router.js里用了mode: 'history'，好在你的web.php已经配置了fallback路由：

Route::get('/{any}', 'HomeController@index')->where('any', '.*');

这个配置是正确的，能确保所有前端路由都指向Laravel的入口视图，所以这部分应该没问题。

按照上面的步骤操作后，你的ExampleComponent应该就能正常显示在router-view的位置了！

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