掌握这几个方法，让你携带参数跳转到详情页面后，刷新页面参数不丢失~

使用场景

点击列表，携带参数跳转到列表详情内页，获取列表详情，刷新页面后，页面数据不丢失。

实现方法

通过params方式传参

js 复制代码

// 路由配置页面
{ 
   path: '/detail/:id',  //若id后面加?代表这个参数是可选的，即使不传id也不会导致页面无法访问
   name: 'detail', 
   component: Detail 
}
 
// 点击详情列表时
this.$router.push({
   path:`/detail/${id}` 
})
 
// 详情页获取参数
this.$route.params.id

通过query方式传参

js 复制代码

// 路由配置页面
{ 
    path: '/detail',
    name: 'detail', 
    component: Detail 
}
 
// 点击详情列表时
this.$router.push({
   path:'/detail',
   query:{
       id:id
   }
})
 
// 详情页获取参数
this.$route.query.id

注意：此种传参方式类似get请求传参，是将参数拼接在地址后的，如果通过query方式传递的是对象或数组，在地址栏会被强制转换成[object object],刷新页面获取不到对象值。

解决方法：通过JSON.stringify()将参数转换为字符串，在获取参数时通过JSON.parse()转换成对象。

js 复制代码

let parObj = JSON.stringify(obj)
// 路由跳转
this.$router.push({
   path:'/detail',
   query:{
       obj:parObj
   }
})
 
// 详情页获取参数
JSON.parse(this.$route.query.obj)

使用props进行组件路由解耦

js 复制代码

// 路由配置
{
   path:'/detail/:id',
   name:'detail',
   component:Detail,
   props:true             // 如果props设置为true，$route.params将被设置为组件属性  
}
 
// 路由跳转
this.$router.push({
   path:`/detail/${id}`
})
 
// 详情页获取参数
export default {
  props:['id'],      // 将路由中传递的参数id解耦到组件的props属性上
  mounted(){
    console.log("id",this.id);  
  }
}

4.使用sessionStorage或localStorage存储参数

js 复制代码

export default {
  name: 'B',
  data() {
    return {
      row: null
    }
  },
  created() {
    let paramsData = localStorage.getItem('params')
    if(paramsData) {
      this.row = this.$route.params.row
      localStorage.setItem('paramsData', JSON.stringify(this.$route.params.row))
    }
  },
  beforeDestroy() {
    localStorage.removeItem('paramsData')
  }
}

5.vuex存储

拓展

js 复制代码

//params跳转
this.$router.push({name: '',params: ''})
//query跳转
this.$router.push({path: '',query: ''})
this.$router.push({name: '',query: ''})

路由跳转中，name和params联用，类似post请求传参；name、path和query联用，类似get请求传参。

经验尚浅（宫尚角&上官浅哈哈），如有说法模糊或错误的地方，请大佬积极指正补充，不吝指教，感谢感谢！！！