详细说明初学者使用vue-router传输参数时的注意事项

1.使用名称和参数的组合来传递参数

这个。$ router . push({ name : ' details '，params: { ' id ' : 233 } })路由配置

从“vue”导入Vue从“vue-router”导入Router Vue . use(Router)导出默认新Router({ mode: 'history '，routes :[{ path : '/details '，name:' details '，component : resolve=require(['./components/details']，resolve)}])来获取参数

这个。$ route . params . id//233

缺少刷新参数显示未定义

这个。$ route . params . id//undefined

注意：这个方法第一次跳转的时候没有问题，参数是可以传过来的，但是刷新页面之后参数就没了(ps:里面其实是有问题的，当你传过来的参数是数字类型的时候，第一次是没有问题的，拿到的时候也是数字类型的，但是刷新页面的时候，数字变成了字符串类型。如果涉及计算，建议先转换类型)

第一次是预期结果//234

console.log(这。$ route . params . id 1)

刷新页面后，直接字符串被拼接。//2331

参数损失解决方案：

routes :[{ path : '/details/: id '，//此处配置的参数名称应该与您传递的参数名称一致。name 3360“details”，component3360 resolve=require ([”./components/details']，resolve)}] 2。路径和查询

这个。$ router . push({ path : '/details '，query: {id: 666}})这。$ route . query . id//666

这个方法参数后面会跟一个问号，例如：/details？Id=666，此方法刷新页面时不会丢失参数

最后，根据自己的项目选择合适的方式传递参数

官方文件vue-router

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。