Vue路由学习：如何在携带参数并将参数传入组件实现页面跳转？

学习之前

期末的JavaWeb大作业打算模仿华为商城写一个购物商城系统。现在希望通过Vue路由实现点击商品框便可跳转至商品详细页面。每个商品有不同的商品编号goodId，商品详细页面根据商品的编号进行页面渲染。

下面有四个商品框，其中的商品从左至右分别对应商品编号1-4。

 开始学习

首先我们已经写好了展示商品详细页面的组件Detail，希望通过/detail并传入goodId的方式跳转并渲染这个组件。

1. 更新路由定义

在路由js文件中，加入新的路径

// router/index.js  
import { createRouter, createWebHistory } from 'vue-router'  
import Detail from '@/components/Detail.vue'  
  
const routes = [  
  {  
    path: '/detail/:goodId',  
    component: Detail,  
    props: true // 开启参数到props的自动映射  
  },  
  // ...其他路由  
]  
  
const router = createRouter({  
  history: createWebHistory(),  
  routes,  
})  
  
export default router;

props: true会使路由参数goodId自动映射为组件的props。当然，路由也允许你传入多个参数给组件。当有多个参数时，多加几个斜杠就好。如：

const routes = [  
  {  
    path: '/detail/:goodId/：userId',  
    component: Detail,  
    props: true // 开启参数到props的自动映射  
  },  
  // ...其他路由  
]  

如果你需要更复杂的映射逻辑，你可以提供一个函数来代替true值。 

import { createRouter, createWebHistory } from 'vue-router';  
import Detail from '../components/Detail.vue';  
  
const routes = [  
  {  
    path: '/detail/:goodId/:userId',  
    name: 'Detail',  
    component: Detail,  
    props: (route) => ({  
      // 根据你的需求处理路由参数  
      // 例如，你可能需要格式化或转换这些参数  
      goodId: parseInt(route.params.goodId, 10), // 将字符串转换为整数  
      userId: route.params.userId, // 可以直接使用字符串，或者进行其他处理  
      // 还可以添加其他属性或计算属性  
    })  
  },  
  // 其他路由...  
];  
  
const router = createRouter({  
  history: createWebHistory(),  
  routes,  
});  
  
export default router;

在这个例子中，props 函数接收一个 route 对象作为参数，这个对象包含了关于当前路由的信息，如 params（路径参数）和 query（查询参数）等。你可以在这个函数里进行任何必要的处理或计算，并返回一个对象，这个对象将被作为属性传递给组件。 

注意！路由中的props名称必须与组件的属性名称严格对应！

2.绑定方法，实现跳转

可以通过绑定router.push方法或使用<router-link>组件的方式实现跳转

router.push方法有如下两种实现：

// 定义路由页面跳转方法
const goToDetail = (goodId) => {
    // router.push({
    //     name:'detail',
    //     params: {
    //         goodId: goodId
    //     }
    // });
    router.push(`/detail/${goodId}`)
}

随后将goToDetail方法绑定至相关组件的@click事件即可