Vue-router之简单的路由传参三种方法
2020-06-03 05:45
363 查看
父组件:
<li v-for="item in list" @click="getList(item.id)" :key="item.id"/>
第一种、跳转时使用push方法拼接携带参数
getList(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/getlist/${id}`, })
路由配置:
{ path: '/getlist/:id', name: 'Getlist', component: Describe }
子组件获取参数:
this.$route.params.id
第二种:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
this.$router.push({ name: 'Getlist', params: { id: id } })
路由配置:
{ path: '/getlist', name: 'Getlist', component: Getlist }
子组件获取参数:
this.$route.params.id
第三种:使用path来匹配路由,然后通过query来传递参数
this.$router.push({ path: '/getlist', query: { id: id } })
路由配置:
{ path: '/getlist', name: Getlist', component: Getlist }
子组件获取参数:
this.$route.query.id
这里要特别注意 在子组件中 获取参数的时候是this.$route,
一般情况下都是用的第二种。
具体请看原vue router官网之组件传参:vue-router组件传参
相关文章推荐
- 浅谈vue-router 路由传参的方法
- Vue + Vue-router 同名路由切换数据不更新的方法
- react路由的使用方法以及通过路由如何传参传递私有属性--【基于最新版本的react-router-dom(4.2.2)】
- 实战 Vue 第2天:了解 vue-router 路由配置、跳转与传参
- vue-router: 路由传参
- VUE项目-饿了吗(ele)-项目总结之router(路由)总结(路由传参等)
- Vue.js路由组件vue-router使用方法详解
- VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)
- vue-router:嵌套路由的使用方法
- Vue.js路由组件vue-router的使用方法
- vue-router 多个路由地址绑定一个组件造成 created 不执行的解决方法
- vue-router 页面传参的俩种方法
- vue-router菜鸟进阶!(路由组件传参 vs H5 History模式)
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- vue-router路由参数刷新消失的问题解决方法
- vue-router路由传参
- vue-router 的传参方法
- vue-router 路由基础简单介绍
- vue-router之nuxt动态路由设置的两种方法小结
- AngularJs之ui.router路由基本配置及传参方法