Vue.js路由传参后能否通过$route.params直接设置图片src？

直接绑定路由参数作为img src的可行性 #

可以直接实现，核心需要修正现有代码的语法错误

当前详情页的img标签无法正常渲染的直接原因：没有给src属性添加动态绑定标识。直接编写src="$route.params.company_logo"时，Vue会把这段字符串本身当作静态图片路径，不会自动解析路由中存储的实际参数值。

最小改动的可用写法如下：

<div class="card companyCard">
  <img 
    height="50px"
    width="50px"
    :src="$route.params.company_logo"
    alt="company Logo"
  />
  <h5>{{ $route.params.company }}</h5>
</div>

给src属性加上:做动态绑定后，就可以直接把路由参数中存储的公司logo地址赋值给img的src属性，正常完成图片渲染。

全量字段通过params传递方案的固有缺陷 #

当前实现里把职位全量信息（长文本职位描述、图片地址等）全部通过router params传递的设计，存在几个无法规避的问题：

• 各类浏览器对URL的长度有明确上限，职位描述这类长文本很容易因为内容过长导致路由参数被截断，出现渲染不全的问题
• 路由params的内容不会持久化到URL路径中，用户刷新详情页、或者直接通过链接打开详情页时，所有通过params传递的字段会直接丢失，对应渲染的内容会全部空白
• 冗余的路由参数会让URL变得冗长不可读，不符合通用的路由设计规范

更稳妥的替代实现方案 #

• 调整路由设计，仅将职位id作为动态路由参数，比如把详情页路径定义为/job/:id，跳转传参时只携带职位id值
• 在详情页组件的初始化生命周期中，根据拿到的id请求对应职位的全量数据，再绑定渲染到页面，这种方式不受URL长度限制，页面刷新也不会丢失数据
• 如果不想发起额外的网络请求，可以用Pinia/Vuex这类全局状态管理库，在列表页加载职位数据时就把全量数据存到全局store中，详情页直接根据传入的id从store中匹配对应职位数据，不需要把所有字段都塞进路由参数里

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