1路由传叁数怎么使用

一、关于点击事件实现跳转并传递参数的方法

用到了this.$router.push()

1.首先我们要定义一个点击事件
2.在定义事件中调用this.$router.push()`方法```

二、this.$router.push()中的参数规则

• 参数为字符串，即路径名称 // 路径/home对应router目录下index.js中定义的path属性值 this.$router.push('/home');
  • 参数为对象
  • // 对应router目录下index.js中定义的path this.$router.push({path:'/home'});
    • 参数为路由命名
    • // 对应router目录下index.js中定义的name this.$router.push({name:'Home'});
      • 带传递参数
      • // params里面放置的是我们要传递过去的参数 this.$router.push({name:'Home',params:{user:'david'}});
        •  带查询参数
        •  // 带查询参数，传递过去的内容会自动拼接变成/home?user=david this.$router.push({path:'/home',query:{user:'david'}});

三、参数的接收

当我们使用params进行传参时，只需在接收参数的地方使用this.$route.params进行接收即可 //传参 this.$router.push({name:'Home',params:{user:'david'}});

// 在name为Home的组件中接收参数 const id=this.$route.params.id; console.log(this.$route.params);//打印结果为{user:'david'} 当我们使用query传参时，只需在接收参数的地方使用this.$route.query进行接收即可，用法同上
！！！这里有一个小细节：$符号后面跟的是route不是router，跳转的时候$后面跟的是router！！！

四、传递的参数是对象或数组

还有一种情况就是，如果通过query方式传递的是 对象或数组 ，在地址栏中会被强制转换成[object Object]，刷新后页获取不到对象值。 那么我们可以通过JSON.stringify()方法将参数转换为字符串，在获取参数时通过JSON.parse转换成对象。 let parObj = JSON.stringify(obj) // 路由跳转 this.$router.push({ path:'/detail', query:{ obj:parObj } })

// 详情页获取参数 JSON.parse(this.$route.query.obj)