说明

本文通过 query 方式实现，实现下图效果：

点击 按钮 显示 张老师 信息，传参给 TeacherInfo 组件，该组件显示参数 id 和 name

特点

url可以看到参数，相当于 javaweb中的url传参，如下图：

与 params 传参相比

• 简单，不需要修改路由

• url是 url?参数名=值 的方式

传参

修改 Teacher.vue 组件

格式：

router.push({
    path:'路由 path', // 根据路由 path 导航
    query: { // query 传参数
        key1: value2,
        key2: value2
    }
})

例子

router.push({
    path:'/teacher/teacherInfo', // 根据路由 path 导航
    query: { // query 传参数
        id: data.id, //参数
        name: data.name //参数
    }
})

接收参数

格式：

{{route.query.key}}

例子

{{route.query.id}}

修改Teacher.vue

修改 Teacher.vue 组件，该组件是 发送参数 页面

<template>
    <div class="app">
        <h3>Teacher组件（绿色框）</h3>
        <div class="teacher_list">
            <div>教师列表（路由传参）</div>
            <div v-for="item in datas" :key="item.id" >
                <button @click="showInfo(item)">{{item.name}}</button>
            </div>
        </div>
        关键：显示路由组件
        <div class="info">
            <RouterView></RouterView>
        </div>
    </div>
</template>
<script lang="ts" setup name="Teacher">
import {RouterView,useRouter} from 'vue-router'
const datas =[
                {
                    id:1,
                    name:'张老师'
                },
                {
                    id:2,
                    name:'李老师'
                },
                {
                    id:3,
                    name:'王老师'
                }
            ]

// 创建路由器对象
const router = useRouter()

// 定义参数接口
interface TeacherParamInter{
    id:number,
    name:string,
}

function showInfo(data:TeacherParamInter){

    router.push({
        path:'/teacher/teacherInfo', // 根据路由 path 导航
        query: { // query 传参数
            id: data.id,
            name: data.name
        }
    })
}
</script>
<style scoped>
.app{
    margin: 0 auto;
    width: 500px;
    height: 300px;
    border: 1px green solid;
}
.teacher_list{
    width: 100px;
    float:left;
    border: 1px blue solid;
}
.info{
    float:left;
    width:390px;
    border: 1px red solid;
}
</style>

接收参数页面

在 views 目录下创建 TeacherInfo.vue 路由组件，内容如下：

<template>
    <div>
        <h3>TeacherInfo组件（红色框）</h3>
        <div>传入参数 id：{{route.query.id}}</div>
        <div>传入参数 name：{{route.query.name}}</div>
    </div>
</template>

<script lang="ts" setup name="TeacherInfo">
import {useRoute} from 'vue-router'
// 本质hooks
const route = useRoute()

console.log("route:",route)

</script>

<style>
</style>

修改 路由文件

修改 src/router/index.js 路由文件，添加 teacherInfo 路由，如下：

// 引入
import {createRouter, createWebHashHistory} from 'vue-router'
//引入组件
import student from '@/views/Student.vue'
import teacher from '@/views/Teacher.vue'
import exam from '@/views/Exam.vue'
import homework from '@/views/Homework.vue'
import teacherInfo from '@/views/TeacherInfo.vue'


// 创建路由器，需要传入 {} 对象
// (一个工程只需要创建一个路由器对象)
const router = createRouter({
    history: createWebHashHistory(), // 路由器的工作模式
    routes : [ // 注意：是 routes，不是router，其value是数组，数组里面的元素是 {} 对象
        {
            path: '/',
            redirect:'/student'
        },
        { 
            path: '/student', //路径，相当于<a>标签的href，关键：必须以 “/” 开头
            component: student, //组件
            children:[
                {
                    name: 'exam',//关键：路由名字
                    path: 'exam', //关键：二级路由路径，前面不要加 “/”
                    component: exam, //组件
                },
                {
                    name: 'homework',//关键：路由名字
                    path: 'homework', //关键：二级路由路径，前面不要加 “/”
                    component: homework, //组件
                }
            ]
        },
        { 
            path: '/teacher', //路径
            component: teacher, //组件
            children:[
                {
                    path: 'teacherInfo',//添加 teacherInfo 的 path
                    component: teacherInfo,//指定 teacherInfo 组件
                }
            ]
        }
    ]
})


// 暴露路由，让其他页面可以使用
export default router

原文出处：/show_1GW3mfMx0j4Z.html