Phoenix LiveView迁移至Heex模板时Routes.page_path如何正确适配

Heex模板适配方案 #

基础适配写法（兼容原有Routes调用） #

直接替换属性插值语法即可，适配后代码如下：

<a href={Routes.page_path(@socket, :index)}>
  <img src="/images/logo.svg" alt="Acompanhante" width="150" />
</a>

核心改动说明 #

• Heex 取消了属性内嵌套<%= %>的插值写法，所有动态属性值直接用{}包裹Elixir表达式即可，不需要额外加引号
• 静态属性（如示例中img的src、alt、width）无需修改，保留原有写法即可

Phoenix 1.7+ 优化写法（可选） #

如果你的项目已经升级到Phoenix 1.7及以上版本，推荐使用验证路由（Verified Routes）替代Routes模块调用，可实现编译时路由校验，避免拼写错误：

<a href={~p"/"}>
  <img src="/images/logo.svg" alt="Acompanhante" width="150" />
</a>

注意将~p"/"替换为你项目中page :index路由对应的实际路径即可。

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