说明

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

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

特点

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

与 params 传参相比

简单，不需要修改路由
url是 url?参数名=值 的方式

传参

修改 Teacher.vue 组件

格式：

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

例子

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

接收参数

格式：

{{$route.query.key}}

例子

{{$route.query.id}}

完整例子

发送参数页面

修改 Teacher.vue 组件

<template>
    <div class="app">
        <h3>Teacher组件（绿色框）</h3>
        <div class="teacher_list">
            <div>教师列表</div>
            <div v-for="item in datas" :key="item.id" >

                <router-link :to="{
                    path:'/teacher/teacherInfo',
                    query:{ // 关键：query 传参
                        id:item.id,
                        name:item.name
                    }
                    }">{{item.name}}</router-link>

                    <button @click="showInfo(item)">显示 {{item.name}} 信息</button>
            </div>
        </div>
        <div class="info">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
export default {
    name:'Teacher',
    data:function(){
        return {
            datas:[
                {
                    id:1,
                    name:'张老师'
                },
                {
                    id:2,
                    name:'李老师'
                },
                {
                    id:3,
                    name:'王老师'
                }
            ]
        }
    },
    methods:{
        showInfo:function(data){

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

接收参数页面

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

<template>
    <div>
        <h3>TeacherInfo组件（绿色框）</h3>
        <div>传入参数 id：{{$route.query.id}}</div>
        <div>传入参数 name：{{$route.query.name}}</div>
    </div>
</template>
<script>
export default {
    mounted:function(){
        console.log(this.$route)
    }
}
</script>

修改路由文件

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

//引入VueRouter
import VueRouter from 'vue-router'
//引入组件
import student from '../pages/Student'
import teacher from '../pages/Teacher'
import exam from '../pages/Exam'
import homework from '../pages/Homework'
import teacherInfo from '../pages/TeacherInfo'

//创建路由，并暴露
export default new VueRouter({
    routes : [
        {
            path: '/',redirect:'/student'
        },
        { 
            path: '/student', 
            component: student, 
            children:[
                {
                    path: 'exam', //二级路由路径，前面不要加 “/”
                    component: exam, 
                },
                {
                    path: 'homework', //二级路由路径，前面不要加 “/”
                    component: homework, 
                }
            ]
        },
        { 
            path: '/teacher', 
            component: teacher, 
            children:[
                {
                    name: 'teacherInfo', // 添加 teacherInfo 的 name
                    path: 'teacherInfo', // 添加 teacherInfo 的 path
                    component: teacherInfo, //指定 teacherInfo 组件
                }
            ]
        }
    ]
})

原文出处：/show_1IX2lw8sCOv0.html

说明

特点