Laravel+Vue项目如何实现带订单ID参数的外部URL正常访问Vue页面

你遇到的404问题根源是：当用户直接访问http://nameofdomain/app/main/100000时，请求会先发送到Laravel服务端，Laravel没有匹配对应路径的路由规则，就直接返回404，不会走到Vue路由的匹配逻辑。你需要按以下步骤依次配置：

第一步：配置Laravel路由兜底 #

在routes/web.php中添加规则，让所有匹配/app/main前缀的请求，无论后面带什么参数，都返回渲染Vue应用的入口视图：

// 注意放在路由定义的靠后位置，避免覆盖其他正常的Laravel接口路由
Route::get('/app/main/{any?}', function () {
    // 这里返回你原本渲染/app/main页面对应的视图即可，比如入口视图是app.blade.php
    return view('app');
})->where('any', '.*');

如果你的应用所有/app/*前缀的路由都由Vue接管，可以直接写更通用的规则：

Route::get('/app/{any?}', function () {
    return view('app');
})->where('any', '.*');

第二步：确认Vue路由配置 #

你之前的动态参数配置逻辑是正确的，只要确认Vue路由开启了history模式，路径匹配规则无误即可：

// router/index.js 示例（Vue3版本）
import { createRouter, createWebHistory } from 'vue-router'
import Main from '../views/main.vue'

const routes = [
  // 兼容原来的无参数路径
  {
    path: '/app/main',
    name: 'Main',
    component: Main
  },
  // 带订单ID的动态路径
  {
    path: '/app/main/:id',
    name: 'MainWithOrderId',
    component: Main
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

第三步：在Vue组件中获取订单ID参数 #

在main.vue中可以直接通过路由对象获取参数，调用后端接口获取订单信息渲染即可：

Vue3 写法 #

import { useRoute } from 'vue-router'

const route = useRoute()
const orderId = ref(null)

onMounted(() => {
  if (route.params.id) {
    orderId.value = route.params.id
    // 此处调用后端接口查询对应订单信息
  }
})

Vue2 写法 #

export default {
  data() {
    return {
      orderId: null
    }
  },
  mounted() {
    if (this.$route.params.id) {
      this.orderId = this.$route.params.id
      // 此处调用后端接口查询对应订单信息
    }
  }
}

可选替代方案：使用Vue路由hash模式 #

如果你不想修改Laravel路由配置，也可以将Vue路由改为hash模式，此时路径会带有#标识，服务端只会解析#前的路径，不会出现404问题：

const router = createRouter({
  // 替换createWebHistory为createWebHashHistory
  history: createWebHashHistory(),
  routes: [
    {
      path: '/main/:id',
      component: Main
    }
  ]
})

此时对应的访问链接为http://nameofdomain/app/main#/100000，可以正常获取参数。

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