使用vue-router传参时注意事项

注意：路由参数类型只能是： ‘string | (string | null)[] | null | undefined’.

如下例子：

this.$router.replace({
path: '/home',
query: {
                   openId:‘orhjfHG’,  //string
                    name: null,   //null
                    inviter:undefined,  //undefined
     //这里只是作为测试:路由参数类型只能是： 'string | (string | null)[] | null | undefined'.
                    flag:1,   //number
                    join:true,  //boolean
                 },

})

在home组件中

console.log(location.href)

//经过路由解析后浏览器地址：

localhost:8080/home?openId=orhjfHG&name&inviter=undefined&flag=1&join=true

console.log(this.$route.query)

总结：如果传的参数值类型是Boolean，number都会转换成字符串类型

1，使用name和params组合传参

this.$router.push({name: 'share', params: {'id':123}})

//经过路由解析后浏览器地址：

localhost:8080/share/123

第一次获取参数:

console.log(this.$route.params.id) //123

刷新后:

console.log(this.$route.params.id) // undefined

总结：此方法第一次跳转是没有问题的，参数也可以传过去，但是刷新页面后，参数就没了 (ps: 这个地方其实还有一个问题，当你传递的参数是number类型，第一次是没有问题的，获取的时候也是number类型，但是当你刷新页面后，number变成string类型，如果涉及计算的建议先类型转换一下(this.$route.params.id + 1))

参数丢失解决方案：

routes: [
        {
            path: '/share/:id', // 这里配置的要和你传递的参数名保持一致
            name: 'share',
            component: resolve => require(['../components/share'], resolve)
        }
    ]

2，path和query组合传参

this.$router.push({path: '/share', query: {id: 123}})

//经过路由解析后浏览器地址：

localhost:8080/share?id=123

该方法刷新页面不会丢失参数