vue-router 传参

2018-10-25  本文已影响0人  _花

动态操作路由

//传方
this.$router.push({ path: 'settleAccount', query: { customerId:obj.customerId}})
//收方
this.$route.query.customerId
//传方
router.push({ name: 'user', params: { userId: 123 }})
//收方
this.$route.params.userId

注意:前者query传参,会在页面url上显示参数,后者params传参则不会,这代表刷新页面前者参数存在,后者不存在

动态匹配路由

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})
//收方
this.$route.params.id

注意:采用此种params传参页面地址栏会显示,刷新后参数仍然存在

上一篇 下一篇

猜你喜欢

热点阅读