vue-router路由传参的使用

路由传参的三种方式

工作里面路由用到确实是比较多的，这里说一下路由传参的几种方式，知识点比较细，先记下来，免得自己忘了还得去翻文档。后续还能补充一下vue-router的源码

juejin.cn/post/684490… 路由源码分析传送门

• 常见场景：点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据。

1. 通过params传参

 //这种没什么好说的，就是最简单的传参，缺点在于刷新之后会丢失参数，
 //只能配合session等各种缓存实现参数持久化，但是耦合度有局限。
 { 
    path: '/detail/:id',  //若id后面加?代表这个参数是可选的
    name: 'detail', 
    component: Detail 
 }
 //1在path中直接携带参数：
 this.$router.push({
      path: '/detail/123456'
  })
 //2通过params,注意一点这里路径只能用'name',用path会覆盖掉参数。
 this.$router.push({
      name: 'detail',
      params: {
          id: 123456
      }
  })
  以上的方式都会在url中暴露出参数。
  //如果在路由中设置了params参数 /:id，但是在跳转的时候没有传递参数，会导致页面没有内容或跳转失败，
  //可在后面加 ？代表这个参数是可选的，即 /:id?

2. 通过query传参

//这种方式传递的参数会在地址栏的 url 后面显示 ?id=?，类似于 get 传参;
//query 必须配合 path 来传参。刷新后页面参数不丢失
// 路由配置
{ 
   path: '/detail', 
   name: 'detail', 
   component: Detail 
}

// 跳转
   this.$router.push({
       path: '/detail',
       query: {
           id: 123456
       }
   })
// 获取id
this.$route.query.id

3. props配合组件路由解耦

保证刷新不丢失参数

// 路由配置
{ 
    path: '/detail/:id',
    name: 'detail', 
    component: Detail,
    props: true // 如果props设置为true，$route.params将被设置为组件属性
}

// 跳转
this.$router.push({
        path: '/detail',
        query: {
            id: row.id
        }
})
    
//组件中
export default {
    props: {
        // 将路由中传递的参数id解耦到组件的props属性上
        id: String
    }
}