说明

实现下图效果：

点击 张老师，传参给 TeacherInfo 组件，该组件 获取参数 id 和 name，并显示

params 方式传参

本文通过 params 方式实现

特点： url可以看到参数，RESTful 风格，如下：

http://localhost:8080/#/teacher/teacherInfo/1/张老师

注意：不能用路由 path 跳转

<router-link :to=''> 用 路由的 name，不能用 路由的 path，否则会不好使

与 query 传参相比

• 只能用 路由的 name，不能用 path

• url是 restful 风格

• 需要修改路由

创建 TeacherInfo.vue 组件

获取 params 参数方式

格式：

{{$route.params.key}}

例子：

{{$route.params.id}}

完整代码

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

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

修改 路由文件

定义路由时，需要在 path 后面加上占位符，表示接收 params 参数，如下：

{
    name: 'teacherInfo', //必须给路由命名，因为 params 传参，不能通过 path 跳转
    path: 'teacherInfo/:id/:name',//关键：路由后面加上占位符，:id。注意：<router-link>中的参数要与此参数匹配，否则页面不显示参数
    component: teacherInfo,
}

注意：

• 必须给路由命名，因为 params 传参，不能通过 path 跳转（因为 path 会动态改变）
• path: 'teacherInfo/:id/:name' 中的参数 与 <router-link> 中的参数，要匹配，否则页面不显示参数

完整代码

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

//引入VueRouter
import VueRouter from 'vue-router'
//引入组件
import student from '../views/Student'
import teacher from '../views/Teacher'
import exam from '../views/Exam'
import homework from '../views/Homework'
import teacherInfo from '../views/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',
                    path: 'teacherInfo/:id/:name',//关键：路由后面加上占位符，:id，表示接收 params 参数
                    component: teacherInfo,
                }
            ]
        }
    ]
})

修改 Teacher.vue 组件

params 传参方式

格式：

<router-link :to="{
    //path:'路由path',//关键：不能用 path，否则不好使
    name:'路由名字',
    params:{ // 关键：params传参
        key:value
    }
    }">...</router-link>

例子：

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

注意： path: 'teacherInfo/:id/:name' 中的参数 与 <router-link> 中的参数，要匹配，否则页面不显示参数

完整代码

<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',//关键：不能用 path，否则不好使
                    name:'teacherInfo',
                    params:{ // 关键：params传参
                        id:item.id,
                        name:item.name
                    }
                    }">{{item.name}}</router-link>
            </div>
        </div>
        <div class="info">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
export default {
    data:function(){
        return {
            datas:[
                {
                    id:1,
                    name:'张老师'
                },
                {
                    id:2,
                    name:'李老师'
                },
                {
                    id:3,
                    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>

总结

原文出处：/show_1IX2lQZLgy4o.html