注：这种方式的传参， 路径用 name，路径用 name，路径用 name , 用 path 会获取不到；如果在路由配置中没有添加 /:id 即 path: 'detail' ，url 中不会显示 id，在详情页还是可以拿到参数 id，但刷新后参数丢失。

传递的参数会暴露在网址中。

如果在路由中设置了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

注：这种方式传递的参数会在地址栏的 url 后面显示 ?id=? ，类似于 get 传参； query 必须配合 path 来传参 。

传递的参数是对象或数组

还有一种情况就是，如果通过 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)

这个方法虽然可以传递对象，若数据少还好，数据多的话地址栏就很长了

注意：在所有的子组件中获取路由参数是 $route 不是 $router

以上 params 和 query 传参方式对比：