1.query方式傳參和接收參數
//傳參:
this.$router.push({
path:'/teacher/edit',
query:{
id:id
}
})
//接收參數:
this.$route.query.id
注意:傳參是this.$router,接收參數是this.$route,這里千萬要看清了!!!
this.router 和this.router和this.route有何區別?
在控制台打印兩者可以很明顯的看出兩者的一些區別:
- router為VueRouter實例,想要導航到不同URL,則使用route**r為VueRouter實例,想要導航到不同URL,則使用router.push方法
- $route為當前router跳轉對象,里面可以獲取name、path、query、params等
2.params方式傳參和接收參數
- 配置路由格式:
/teacher/edit/:id
- 傳遞后形成的路徑:
/teacher/edit/1
router-link方式
<template slot-scope="scope">
<router-link :to="'/teacher/edit/' + scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button
>
</router-link>
</template>
to前要加冒號:,表示單向綁定
代碼方式切換
//傳參:
this.$router.push({
name:'xxx', //路由配置的name屬性
params:{
id:id
}
})
//接收參數:
this.$route.params.id
注意:params傳參,push里面只能是 name:'xxxx',不能是path:'/xxx',因為params只能用name來引入路由,如果這里寫成了path,接收參數頁面會是undefined!!!