常见场景:点击列表的详情,跳转到详情内页,在内页依据传递的参数获取详情数据。

路由传参个别有如下几种形式,上面次要介编程式导航 router.push 的传参形式:

办法一:通过 params 传参

路由配置如下:

{     path: '/detail/:id',  //若id前面加?代表这个参数是可选的    name: 'detail',     component: Detail }
  • 通过 $router.push 中 path 携带参数的形式

    // 列表中的传参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 前面显示,如图:

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

    如果在路由中设置了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 传参形式比照:

  • 通过 $router.push 的 params + 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        }    })} // 详情页export default {    props: { // 将路由中传递的参数id解耦到组件的props属性上 id: String    },    mounted: {        console.log(this.id)    }}

详见:动静路由匹配    路由组件传参

此外,还能够通过把参数存在 sessionStorage 或 localStorage 中来解决页面刷新参数失落的问题,具体结合实际我的项目即可。