Vue3路由params参数

params是什么？

它就是Vue路由插件中的路径参数，我们可以把一些动态参数放在路径中；它的好处就是更加的符合RESTful规范；

实际使用

现实中，可以看到最多的就是商品列表这些页面，用户在列表中点击任意商品，跳转到该商品的详情页，详情页要对应商品的ID查数据；
比如说，我们现在有两个页面，一个页面是商品列表，一个是商品详情，我们先来写一下路由配置

js 复制代码

import { createRouter, createWebHashHistory } from 'vue-router'
import GoodsList from '../components/GoodsList.vue'
import GoodsDetail from '../components/GoodsDetail.vue'

const routes = [{
    path: '/', component: GoodsList
}, {
    path: '/detail/:id', component: GoodsDetail, name: 'GoodsDetail'
}]
const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router

注意看商品详情页的路径，这个路径是一个占位
现在我们来简单的写一下商品列表页面

js 复制代码

<template>
    <div>
        <h1>商品列表</h1>
        <div v-for="goods in goodsList" :key="goods.id">
            <router-link :to="{ name: 'GoodsDetail', params: { id: goods.id } }">{{ goods.name }}</router-link>
        </div>
    </div>
</template>

<script setup>
import { RouterLink } from 'vue-router';

const goodsList = [
    { id: 1, name: '奔驰' },
    { id: 2, name: '宝马' },
    { id: 3, name: '奥迪' },
];
</script>

注：上面的非常简单，就是写一个一个对象，然后通过v-for遍历到路由链接上

接着就来写商品详情页

vue 复制代码

<template>
    <div>
        <h1>商品详情</h1>
        <p>商品ID: {{ route.params.id }}</p>
        <p>商品名称: {{ goodsName }}</p>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';

const route = useRoute();
const goodsId = Number(route.params.id);
const goodsName = {
    1: '奔驰',
    2: '宝马',
    3: '奥迪'
}[goodsId] || '未知商品';
</script>

具体的流程如下：

plaintext 复制代码

GoodsList.vue（列表页）
  ↓ 点击按钮，调用goToDetail(1)
  ↓ 执行router.push({name: 'GoodsDetail', params: {id:1}})
Vue Router（路由）
  ↓ 自动拼接URL为/detail/1，并存id=1到参数仓库
  ↓ 跳转到/detail/1，渲染GoodsDetail组件
GoodsDetail.vue（详情页）
  ↓ 用route.params.id取出id=1
  ↓ 根据id=1找到"奔驰"，显示在页面上

几个注意事项

看组件中路由链接跳转的地方，我们用的是name，切记不要使用path，使用path的话params会失效；
params默认传递是字符串，如果你想传数字的话，就需要使用NUMER转一下，例如我们上面的const goodsId = Number(route.params.id);
路由上定义几个，参会传几个，例如你路由配置只定义了id，就算你传name，不定义也看不到；