关于router.push的使用

vue中组件跳转,看到有router.push这个功能,
在代码里我是这么写的

export default {
...
...
   toDetail (index, row, event) {
      this.$router.push({name: '/detail', params: {
        name: row['name'],
        addr: row['address'],
        current_period: this.custom.value1,
        current_round: this.custom.value2
      }})
}

我就在另一个组件中使用

this.$route.params.name
this.$route.params.addr
this.$route.params.current_period
this.$route.params.current_round

这样取值,但是每次刷新js中的数据都不存在了
后来查了资料解决了问题特别在这里记录一下

vue router 中的传值

在router有query 和 params 这两个的区别

params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params
query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

注意 name 和 params要一起使用, 而path 和 query 要一起使用

在params使用的时候要注意一个问题 需要配上router.js

// 需要我路由中这么配置
export default new Router({
  mode: 'history',
  routes: [
      {
        path: '/:name/:addr/:current_period/:current_round',
        name: 'home',
        component: Home
      },
  ]
})

如果不这么写那么就会出现我在项目中出现的问题,数据都没有了

但是使用query就不需要再router.js中配置

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值