AMP开发：如何在Laravel Blade模板的AMP页面实现返回上一页功能？

正确实现方式（原生AMP API，无验证错误） #

AMP 原生提供了navigateBack内置动作，完全符合AMP规范，不需要引入额外扩展，也不会触发验证报错。

基础用法 #

直接在Blade模板中写入以下代码：

<a 
  on="tap:AMP.navigateBack()" 
  role="button" 
  tabindex="0"
  class="你自定义的样式类"
>
  返回上一页
</a>

补充说明：添加role="button"和tabindex="0"是为了满足无障碍访问要求，符合AMP的可访问性校验规则。

带兜底跳转的用法 #

如果用户是直接访问当前页面，没有上一页历史记录时，可以配置兜底跳转地址（比如站点首页），适配Laravel的路由生成：

{{-- 定义兜底地址配置 --}}
<amp-state id="backPageConfig">
  <script type="application/json">
    {
      "fallback": "{{ route('index') }}"
    }
  </script>
</amp-state>

{{-- 返回按钮 --}}
<a 
  on="tap:AMP.navigateBack(fallback='backPageConfig.fallback')" 
  role="button" 
  tabindex="0"
  class="你自定义的样式类"
>
  返回上一页
</a>

Blade组件封装（可选） #

如果全站多处用到该功能，可以封装为Blade组件：

1. 新建app/View/Components/AmpBackButton.php和resources/views/components/amp-back-button.blade.php
2. 组件模板代码：

<a 
  on="tap:AMP.navigateBack(fallback='{{ $fallback ?? url('/') }}')" 
  role="button" 
  tabindex="0"
  {{ $attributes->merge(['class' => '默认样式类']) }}
>
  {{ $slot ?? '返回上一页' }}
</a>

3. 调用时直接使用：

<x-amp-back-button />
{{-- 自定义兜底地址和文案 --}}
<x-amp-back-button fallback="{{ route('goods.list') }}">返回商品列表</x-amp-back-button>

之前方案失效/报错的原因 #

• AMP.goBack是AMP早期废弃的API，新版本AMP Runtime已经移除该方法，因此无法生效
• href="javascript:history.back()"违反AMP禁止自定义内联JS的核心规范，因此会触发验证报错
• AMP对amp-script的权限做了严格限制，禁止操作History API，因此该方案无法实现

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