Blade模板中Request方法可用但Vue模板中无法正常生效问题咨询

{{ \Request::get('sample_parameter') }} 是Laravel框架服务端层面的调用，执行时机是Blade模板渲染阶段：

• 该方法获取的是用户访问当前页面对应的HTTP请求中携带的参数，包括URL查询参数、表单提交参数等，参数随页面访问请求一起到达服务端，不需要额外定义专属API接口
• 服务端直接从当前请求上下文里取出参数值，渲染时直接嵌入到输出的HTML内容中，所以不需要额外请求就能正常获取到值

你用axios.get('sample_parameter')得到HTML的原因是：该调用是客户端侧发起新的HTTP请求，请求路径为当前域名下的/sample_parameter，你没有定义对应的接口路由，Laravel会返回默认的404页面、或者 fallback路由对应的HTML内容，自然无法拿到目标参数。

分两种场景适配：

• 场景1：Vue组件直接嵌套在Blade模板中（非独立SPA项目）
  直接在Blade模板中渲染Vue组件时，将参数作为Prop传递给组件即可，不需要额外发起请求：

  <your-vue-component :sample-parameter="{{ json_encode(\Request::get('sample_parameter')) }}"></your-vue-component>
  

  之后在Vue组件中声明sampleParameter Prop就可以直接使用该值。
• 场景2：前后端完全分离的独立SPA项目
  如果你需要获取的是当前浏览器URL里的查询参数，直接用前端API读取即可，不需要发请求：

  const sampleParameter = new URLSearchParams(window.location.search).get('sample_parameter')
  

  如果该参数是服务端生成的业务参数、不放在URL中，你需要新增一个通用API接口，后端在接口中返回对应的参数值，再用axios调用该接口获取即可：

  // 后端新增接口路由为 /api/common-params，返回包含sample_parameter的JSON
  axios.get('/api/common-params').then(res => {
    const sampleParameter = res.data.sample_parameter
  })
  

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