如何在Laravel中实现点击路由并传递ID参数？

嘿，我来帮你搞定这个路由参数传递的问题！你现在的代码里href是固定的/album/，要把album.id带进去其实很简单，这里有两种常用方法：

方法一：直接拼接href属性（快速实现） #

你可以用JavaScript模板字符串来动态拼接路由地址，记得给href加上冒号:, 表示它是一个动态绑定的表达式，这样就能把album.id插入到URL里：

<div v-for="album in albums" :key="album.id" class="border-2 w-3/4 h-48 bg-sky-500 ">
  <a :href="`/album/${album.id}`">{{ album.title }}</a>
</div>

这样${album.id}就会被替换成对应的专辑ID，最终生成的URL就是你想要的localhost:8000/album/5这种格式。

方法二：使用Vue Router的<router-link>组件（推荐） #

如果你用的是Vue Router构建单页应用，更推荐用官方的<router-link>组件来实现跳转——它不会触发页面刷新，完全符合单页应用的特性。

首先，你的路由配置里需要先定义好带动态参数的路由规则，比如：

// router/index.js 示例
import { createRouter, createWebHistory } from 'vue-router'
import AlbumComponent from '../views/AlbumComponent.vue'

const routes = [
  // 其他路由...
  {
    path: '/album/:id', // :id就是我们要接收的动态参数
    name: 'album', // 给路由起个名字，方便后续跳转调用
    component: AlbumComponent
  }
]

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

export default router

然后在模板里替换掉<a>标签，用<router-link>，通过:to属性传递路由信息：

方式1：用path拼接参数 #

<div v-for="album in albums" :key="album.id" class="border-2 w-3/4 h-48 bg-sky-500 ">
  <router-link :to="`/album/${album.id}`">{{ album.title }}</router-link>
</div>

方式2：用路由名称+params（更灵活） #

如果以后路由的path需要修改，用名称跳转的话不需要改模板代码，只需要调整路由配置：

<div v-for="album in albums" :key="album.id" class="border-2 w-3/4 h-48 bg-sky-500 ">
  <router-link :to="{ name: 'album', params: { id: album.id } }">{{ album.title }}</router-link>
</div>

跳转后，你在目标页面（比如AlbumComponent）里，Vue2可以通过$route.params.id获取ID，Vue3则可以用useRoute()钩子来拿到这个参数。

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