常见场景：点击列表详情，跳转到详情内页，根据传入的参数获取内页的详细数据。路由的参数传递一般有几种方式。下面主要介绍程序化导航router.push的传参方法：方法一：通过params传参。路由配置如下：{path:'/detail/:id',//IfidAdding?在最后意味着这个参数是可选的name:'detail',component:Detail}通过$router.push中的路径携带参数的方式//传递列表中的参数goDetail(row){this.$router.push({path:`/detail/${row.id}`})}//详情页获取参数this.$route.params.id通过$router.push的params传参//列表页传递参数goDetail(row){this.$router.push({name:'detail',params:{id:row.id}})}//从详情页获取this.$route.params.id使用name，对路径使用name，对路径使用name，使用path获取；如果在路由配置中不加/:id，即path:'detail'，url中不会显示id，仍然可以获取到详情页id上的参数，只是参数丢失了刷新后。上述两种方法中，传递的参数id会显示在url后面，如图：传递的参数会暴露在url中。如果在路由中设置了params参数/:id，但是在跳转过程中没有传递任何参数，会导致页面没有内容或者跳转失败。你可以加？表示该参数可选，即/:id?方法二：通过query传参//路由配置{path:'/detail',name:'detail',component:Detail}//列表页面goDetail(row){this.$router.push({path:'/detail',query:{id:row.id}})}//详情页this.$route.query.id注意：这种方式传递的参数会在?id=?显示在地址栏的url后面，类似于获取参数；查询必须匹配传递参数的路径。传递的参数是对象或数组。另一种情况是如果通过查询传递一个对象或者数组，会在地址栏中强制转换为[objectObject]，刷新后无法获取到对象值。此时可以将要传递的参数通过JSON.stringify()方法转成字符串，然后在详情页通过JSON.parse()转成对象。letparObj=JSON.stringify(obj)this.$router.push({path:'/detail',query:{'obj':parObj}})//详情页JSON.parse(this.$route.query.obj)这个方法虽然可以传递对象，但是如果数据少也没关系。如果数据较多，地址栏会很长。注意：所有子组件中获取的路由参数都是$route，而不是$router。上面params和query传参方式对比：通过params+$router.push的name传参。如果路由中没有设置params参数，则不会在路由后面拼接参数，但页面刷新参数会丢失。在$router.push中通过path携带参数或者通过query传递参数，参数会拼接在地址后面，暴露信息。方法三：使用props配合组件路由解耦//路由配置{path:'/detail/:id',name:'detail',component:Detail,props:true//如果props设置为true,$route.params将被设置为组件属性}//列表页面goDetail(row){this.$router.push({path:'/detail',query:{id:row.id}})}//详情页导出default{props:{//将路由中传入的参数id解耦到组件的props属性id:String},mounted:{console.log(this.id)}}详见：动态路由匹配路由组件传递参数另外，也可以通过将参数保存在sessionStorage或者localStorage中来解决页面刷新参数缺失的问题，可以结合实际项目。
