1.第一种方法 页面刷新数据会丢失

我们学习过vue路由之后知道，vue传参有几种方式
1.vue路由params是根据name跳转的，通过params来传递参数
2.vue路由query是根据path跳转的，通过query来传递参数

通过路由属性中的name来确定匹配的路由，通过params来传递参数。

methods：{
  toLink(id) {
       this.$router.push({
          name: 'systemConfig',
          params: { // 可以传递多个参数，根据自己需求来
            id: id
          }
        })
  }

router.js

{
     path: '/systemConfig',
     name: 'systemConfig',
     component: () => import('@/views/systemConfig/index'),
   }

子组件中: 这样来获取参数

this.$route.params.id

2.第二种方法

使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

methods：{
  toLink(id,row) {
        this.$router.push({
          path: '/systemConfig',
          query: {
            id: id,
            detailObj: row || {}
          }
        })
  }

子组件中: 这样来获取参数

• 获取参数,初次载入

console.log(this.$route.query);//{detailObj: {…}} 正常显示

• 刷新页面

console.log(this.$route.query);//`{detailObj: "[object Object]"}`获取不到内部数据

this.$route.query.id
// this.id = this.$route.query.id  ....

问题出现原因:

传递的参数 如果是普通格式没问题，如果是对象，刷新后不管是params 还是 query 都会消失
个人解释：使用router.push通过url地址栏去传参，而地址栏传参是只支持字符串.注意是字符串，所以对象会解析失败

解决方案:

1. 使用JSON转译 JSON.stringify（） 把对象变成字符串，然后再传递，没有问题。

methods：{
  toLink(id,row) {
        this.$router.push({
          path: '/systemConfig',
          query: {
            id: id,
            detailObj: JSON.stringify(row) || {} // 用JSON转成字符串，在去解析
          }
        })
  }

let { id, detailObj } = this.$route.query
this.id = id
this.detailObj = JSON.parse(detailObj)
console.log(id,JSON.parse(detailObj));//可以成功获取参数

不过这样还是会有个问题，你每次进去要刷新才会解决，用vue生命周期activated去解决对应需求

created() {
    let { id, projectVersion } = this.$route.query
    this.id = id
    this.detailObj = JSON.parse(detailObj)
    console.log('id:', id, 'detailObj:', detailObj, this.$route.query)
  },
  mounted() {
    this.getPageData() // 这个是获取列表数据的方法，你可要根据自己的方法来做对应需求
  },
  activated() { // 使用该生命周期方法可以解决第二次进入该页面数据不刷新问题
    let { id, detailObj } = this.$route.query
    this.id = id
    this.detailObj = JSON.parse(detailObj)
    this.getPageData()// 这个是获取列表数据的方法
  },

3.第三种方法页面刷新数据不会丢失

它会显示在url地址栏中

methods：{
  toLink(id) {
      //直接调用$router.push 实现携带参数的跳转
      this.$router.push({
        path: `/systemConfig/${id}`,
      })
}

路由配置

{
     path: '/systemConfig/:id',
     name: 'systemConfig',
     component: () => import('@/views/systemConfig/index'),
   }