vue this.$router.push跳转传参教程

缘起

项目多且杂，跳转肆年华。风卷花落去，不知入谁家。今天就说说跳转携带参数无效问题。

基本用法

功能	实例
通过路径字符串跳转	this.$router.push('/home')
通过路径参数跳转	this.$router.push('/home')
通过路由name跳转	this.$router.push({ name: 'home', params: { userId: 38}})
通过地址传递参数	this.$router.push({ name: 'home', query: { userId: 33 }})
通过query及param传递	this.$router.push({ name:'home', params:article,query:{userId:'33'}})

回显代码如下：

    console.log(this.$route.query)
    console.log(this.$route.params)

只放最后一种情况下的打印截图：

能看到如果我们同时设置了query及param两个值，就能通过query或者param获取到参数。

注：在使用过程中，发现this.$router.push({ path: 'home', params: { userId: 33 }}) 中，把name换成path，则无效。只有在设置name的情况下才能正常的获取到param的值。推论，router获取参数的方式应该是通过name获取的，抛砖引玉，如有理解不当，请指正。