Laravel 11+Vue3环境下Vue跳转Blade页面重定向失效问题

1. 修正Vue项目的基础路径配置 #

如果Vue项目的base配置错误（比如设成了完整域名），会直接导致路径拼接异常：

• 若使用Vite，修改vite.config.js：

  export default defineConfig({
    base: '/vue/', // 仅设置相对路径前缀，不要带完整域名
    // 其他配置项...
  })
  

• 若使用Vue CLI，修改vue.config.js：

  module.exports = {
    publicPath: '/vue/',
    // 其他配置项...
  }
  

2. 使用正确的跳转方式 #

方式一：根相对路径直接跳转 #

无需写完整域名，直接用根相对路径即可：

window.location.href = '/profile';

方式二：注入Laravel路由地址到Vue #

在承载Vue的Blade模板（如app.blade.php）中，提前注入Laravel生成的路由URL：

<script>
window.Laravel = {
    profileUrl: "{{ route('profile') }}"
};
</script>

然后在Vue组件中直接调用：

window.location.href = window.Laravel.profileUrl;

3. 限制Vue Router的路径范围 #

配置Vue Router时，指定history模式的基础路径为/vue/，确保它只处理带vue前缀的路径，不干扰根路径的Laravel路由：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
    history: createWebHistory('/vue/'),
    routes: [
        // 你的Vue路由配置
    ]
});

export default router;

4. 清理浏览器缓存 #

如果以上配置都正确但问题依旧，清理浏览器缓存（Ctrl+Shift+Delete），避免旧的路由缓存导致解析异常。

内容的提问来源于stack exchange，提问作者Syed Abbas Naumani