关于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中配置

你可能感兴趣的:(vue,vue,vue-router)