Vue+Laravel单页应用中vue-router路由失效跳转404问题咨询

1. 添加<router-view>后页面空白的问题 #

原因 #

Vue 2 强制要求单文件组件的<template>下只能存在1个根节点，你修改后的app.vue模板同时存在<div class="container">和<router-view>两个平级根节点，导致组件渲染失败。同时你在模板中直接硬编码了<home>、<about>组件标签，和vue-router的路由渲染逻辑冲突，后续也会出现内容重复的问题。

修复代码 #

替换app.vue为以下内容：

<template>
  <div class="container">
    <main>
      <!-- 路由匹配的组件将自动渲染到router-view位置 -->
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: "app"
}
</script>

<style lang="scss">
</style>

2. 直接访问/about路径返回404的问题 #

原因 #

你在vue-router中开启了history模式，该模式下用户直接访问非根路径时，请求会优先发送到Laravel后端，而你当前仅配置了/路径的路由规则，后端无法匹配/about路径因此返回404。

修复代码 #

修改routes/web.php，添加兜底路由规则，所有未匹配的路径都返回首页视图，交由前端vue-router处理路由：

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
  return view('welcome');
});

// 新增兜底路由，必须放在所有路由定义的最末尾
Route::get('{any}', function () {
  return view('welcome');
})->where('any', '.*');

生效操作 #

修改完成后执行以下命令重新编译前端资源，刷新页面即可正常使用：

npm run dev

内容的提问来源于stack exchange，提问作者Artur Müller Romanov