vue-Router如何传参以及解决params传参页面刷新导致params参数清空的问题

路由传参

vue中路由传参的参数主要有两种：query与params参数。
首先介绍一下两种的的使用方式与区别吧。
query参数，可以使用path(要跳转的目标路由)，与name(要跳转的目标路由组件的名称，因此要在路由中添加name)两种方式 。例如：
我在当前路由要跳转到目标路由/songsDetail中，且用传递query参数。首先配置路由为：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
 {
      path:'/login',
      name:'Login',
      component:Login
    },
 {
      name:'SongsDetail',
      path:'/songsDetail',
      component:SongsDetail,
    }
})
export default router

由于使用的是query参数，因此name可以不写，可以使用path进行传参。
如果使用了router-link进行路由跳转，那么可以使用to进行路由跳转并传参：

<!-- 使用path进行传参 -->
<router-link  :to="{path:'/songsDetail',query:{id:item.id}">
  </router-link>
   <!-- 使用name进行传参 -->
   <router-link  :to="{name:'SongsDetail',query:{id:item.id}">
  </router-link>

以上两种方式都能进行路由传参。
如果要使用params参数，那么不能使用path，只能使用name，

   <router-link  :to="{name:'SongsDetail',params:{id:item.id}">
  </router-link>

当然，这里是使用router-link进行路由跳转，我们还能使用this.$router.push()与this.$router.replace()进行路由跳转并传参，传参方式与上述一样。

this.$router.push({path:'/songsDetail',query:{id:item.id})
this.$router.replace({"{path:'/songsDetail',query:{id:item.id}"})

当然也可以同时传query与params参数。但 必须使用name

<router-link  :to="{name:'SongsDetail',query:{id:item.id}，params:{id:item.id}" >
  </router-link>

好，介绍完query参数与params参数，接下来就说说它们的区别吧。

query参数与params参数的区别，与params参数清空的解决方法

使用query参数时，在路由跳转完后，其参数会显示在url的后面 ，如果参数较多会导致url过长。但页面刷新时，query参数不会被清空 。
而使用params参数时，在路由跳转完后，其参数不会显示在url的后面。但页面刷新或者回退时，params参数会被清空。因此，要想保留params参数，需将其保存在localStorage中。 在 created 生命周期时先获取缓存数据，在页面销毁时删除缓存。

export default {
  data () {
    return {
      testData: {}
    }
  },
  created () {
    const tempData = localStorage.getItem('tempData')
    if (tempData) {
      this.testData = JSON.parse(tempData)
    } else {
      this.testData = this.$route.params

      localStorage.setItem('tempData', JSON.stringify(this.$route.params))
    }
  },
  beforeDestroy () {
    localStorage.removeItem('tempData')
  }
}