2020-08-18 19:05发布
父组件: 使用
例如:routerlink传参
routerlink传参
子组件: this.$route.params.num接收父组件传递过来的参数
mounted () { this.num = this.$route.params.num }
路由配置::{path: '/a/:num', name: A, component: A}
{path: '/a/:num', name: A, component: A}
地址栏中的显示::http://localhost:8080/#/a/123
http://localhost:8080/#/a/123
父组件: 绑定点击事件,编写跳转代码
push传参 methods: { deliverParams (id) { this.$router.push({ path: `/d/${id}` }) } }
子组件: this.$route.params.id接收父组件传递过来的参数
mounted () { this.id = this.$route.params.id }
路由配置::{path: '/d/:id', name: D, component: D}
{path: '/d/:id', name: D, component: D}
地址栏中的显示::http://localhost:8080/#/d/123
http://localhost:8080/#/d/123
父组件: 匹配路由配置好的属性名
params传参 deliverByName () { this.$router.push({ name: 'B', params: { sometext: '一只羊出没' } }) }
子组件:
This is page B! 传入参数:{{this.$route.params.sometext}}
传入参数:{{this.$route.params.sometext}}
路由配置: 路径后面不需要再加传入的参数,但是name必须和父组件中的name一致{path: '/b', name: 'B', component: B}
{path: '/b', name: 'B', component: B}
地址栏中的显示: 可以看出地址栏不会带有传入的参数,且再次刷新页面后参数会丢失http://localhost:8080/#/b
http://localhost:8080/#/b
父组件:
query传参 deliverQuery () { this.$router.push({ path: '/c', query: { sometext: '这是小羊同学' } }) }
This is page C! 这是父组件传入的数据: {{this.$route.query.sometext}}
这是父组件传入的数据: {{this.$route.query.sometext}}
路由配置: 不需要做任何修改{path: '/c', name: 'C', component: C}
{path: '/c', name: 'C', component: C}
地址栏中的显示: (中文做了转码)http://localhost:8080/#/c?sometext=这是小羊同学
http://localhost:8080/#/c?sometext=这是小羊同学
最多设置5个标签!
一、router-link路由导航
父组件: 使用
例如:routerlink传参
子组件: this.$route.params.num接收父组件传递过来的参数
路由配置::
{path: '/a/:num', name: A, component: A}
地址栏中的显示::
http://localhost:8080/#/a/123
二、调用$router.push实现路由传参
父组件: 绑定点击事件,编写跳转代码
子组件: this.$route.params.id接收父组件传递过来的参数
路由配置::
{path: '/d/:id', name: D, component: D}
地址栏中的显示::
http://localhost:8080/#/d/123
三、通过路由属性中的name匹配路由,再根据params传递参数
父组件: 匹配路由配置好的属性名
子组件:
路由配置: 路径后面不需要再加传入的参数,但是name必须和父组件中的name一致
{path: '/b', name: 'B', component: B}
地址栏中的显示: 可以看出地址栏不会带有传入的参数,且再次刷新页面后参数会丢失
http://localhost:8080/#/b
四、通过query来传递参数
父组件:
子组件:
路由配置: 不需要做任何修改
{path: '/c', name: 'C', component: C}
地址栏中的显示: (中文做了转码)
http://localhost:8080/#/c?sometext=这是小羊同学
一周热门 更多>