方式一：query 显式参数

传递

Login.vue

<template>
<div class="login">
    <table border="1">
        <tr>
            <th>品牌</th>
            <th>类型</th>
            <th>ID</th>
            <th>详情</th>
        </tr>
        <tr v-for="item in data">
            <td>{{ item.name }}</td>
            <td>{{ item.type }}</td>
            <td>{{ item.id }}</td>
            <td><button @click="toDetail(item)">详情</button></td>
        </tr>
    </table>
</div>
</template>

<script setup lang="ts">
import { data } from './data.json'
import { useRouter } from 'vue-router'

type Datum = {
  name: string;
  type: string;
  id: number;
}

const router = useRouter()

const toDetail = (item: Datum) => {
    router.push({
        path: '/register',
        query: item
    })
}

接收

Register.vue

<template>
    <div class="register">
        <div>{{ item?.name }}</div>
        <div>{{ item?.type }}</div>
        <div>{{ item?.id }}</div>
    </div>
</template>
    
<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()

const item = route.query

</script>
    
<style scoped>
.register {
    font-size: 30px;
}
</style>

注意点：
    ① 传参既可以用 path，也可以用 name
    ② 参数用 query 传递，一定要是个对象
    ③ 传递的参数会在路径上显示，页面刷新参数不会丢失
    ④ js 中要用 useRoute().query. 接收，模板中可以用 $route.query. 接收

2. params 隐式传参

最新的 vue-router4 已经不支持这个方式了（2022-8-22）

3. params 动态参数

路由配置

/src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "Login",
        component: () => import('../pages/Login.vue')
    },
    {
        path: "/register/:id",
        name: "Register",
        component: () => import('../pages/Register.vue')
    }
]

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

export default router

传递

Login.vue

<template>
<div class="login">
    <table border="1">
        <tr>
            <th>品牌</th>
            <th>类型</th>
            <th>ID</th>
            <th>详情</th>
        </tr>
        <tr v-for="item in data">
            <td>{{ item.name }}</td>
            <td>{{ item.type }}</td>
            <td>{{ item.id }}</td>
            <td><button @click="toDetail(item)">详情</button></td>
        </tr>
    </table>
</div>
</template>

<script setup lang="ts">
import { data } from './data.json'
import { useRouter } from 'vue-router'

type Datum = {
  name: string;
  type: string;
  id: number;
}

const router = useRouter()

const toDetail = (item: Datum) => {
    router.push({
        name: 'Register',
        params: {
            id: item.id
        }
    })
}


</script>

<style scoped>
.login {
    font-size: 20px;
    text-align: center;
}
</style>

接收

Register.vue

<template>
    <div class="register">
        <div>{{ item?.name }}</div>
        <div>{{ item?.type }}</div>
        <div>{{ item?.id }}</div>
    </div>
</template>
    
<script setup lang="ts">
import { data } from './data.json'
import { useRoute } from 'vue-router'

const route = useRoute()

const item = data.find(v => v.id === Number(route.params.id))
console.log(item)

</script>
    
<style scoped>
.register {
    font-size: 30px;
}
</style>

注意点：
    ① 跳转去的路由路径信息要写明参数，形如 /:id
    ② 参数用 params 传递，一定要是个对象
    ③ 传参的名称要和路径上的参数名匹配
    ④ js 中要用 useRoute().params.id 接收，模板中可以用 $route.params.id 接收