Vue 怎么实现带参数进入详情页

第一段：概述

在前端开发中，跳转到详情页并将参数带过去是一个很常见的操作。对于使用 Vue 进行开发的项目来说，实现这个功能非常简单。下面我们将从路由配置、传递参数、接收参数等方面详细介绍。

第二段：路由配置

首先需要在路由中配置相应的路由信息。具体可以参考下方代码：

// 路由配置
const routes = [
  {
    path: '/detail/:id', // 带参数路由
    name: 'detail',
    component: Detail
  },
];
 
// 创建路由实例
const router = new VueRouter({
  routes
});

第三段：传递参数

设想我们有一个商品列表页，每个商品有自己的唯一标识 id。点击某个商品会跳转到详情页，并且将该商品的 id 作为参数传递进去，方便后续做详细展示。

// 使用路由跳转到详情页
this.$router.push({
  name: 'detail',
  params: {
    id: itemId // itemId 为商品 id
  }
});

第四段：接收参数

在详情页中，需要先从路由中获取传递过来的参数，再根据对应的 id 做详细展示。

// 在详情页中获取参数
export default {
  name: 'detail',
  data() {
    return {
      itemId: ''
    }
  },
  mounted() {
    this.itemId = this.$route.params.id; // 获取传递过来的 id
    console.log('itemId:', this.itemId);
  }
}