【Vue】7.解决路由传参刷新数据消失的问题及总结路由传参的三种基本模式

最近项目中有涉及到列表页跳转到详情页，就遇到了路由传参的问题，还有就是刷新页面的时候数据就获取不到了，于是就好好的看了看官方文档，做了如下的总结，都知道在这些js的框架中路由很重要，它是连接各个页面的桥梁，而参数在其中扮演着非常重要的角色，在一定意义上决定着两座桥梁是否能够连接成功，在vue中路由传参支持三种方式：

场景：一个列表页到详情页，一个路由的li标签循环绑定一个数组，点击每一个li标签并携带参数跳转到另外一个路由，显示相应的正确的内容

    <div>
      <ul>
        <li v-for="(item,index) in reportList" :key=index
            @click="goReportDetail(item)">
          <div class="report-user-info">
            <p class="report-user-name" v-text="item.name"></p>
            <p class="report-user-phone" v-text="item.telNo"></p>
          </div>
          <div class="report-user-state">
            <p class="report-user-text" v-text="item.queryType"></p>
            <p class="report-user-time" v-text="item.queryTime"></p>
          </div>
        </li>
      </ul>
    </div>

1.直接调用this.$router.push()实现携带参数的跳转

this.$router.push({
    path: '/reportDetails/${item.id}',
});

这一种方法需要在路由里面配置：
{
    path: '/reportDetails/:id',
    name: 'reportDetails',
    component: ReportDetails,
}
很显然需要在path中添加/:id来对应this.$router.push()中携带的参数。
在另一路由中可以使用如下方式接收传递的参数
this.$route.params.id

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

this.$router.push({
    name: 'reportDetails',
    params: {
            id: item.id
            }
});

对应路由配置，注意这里这里不能使用:/id来传递参数了，因为路由中已经使用params来携带参数了
{
    path: '/reportDetails',
    name: 'reportDetails',
    component: ReportDetails,
}
在另一路由中可以使用如下方式接收传递的参数
this.$route.params.id

3.使用path来匹配路由，使用query来传递参数

这种情况下query传递的参数会显示在url后面？id=？
this.$router.push({
    name: 'reportDetails',
    query: {
            id: item.id
            }
});

对应路由配置
{
    path: '/reportDetails',
    name: 'reportDetails',
    component: ReportDetails,
}
在另一路由中可以使用如下方式接收传递的参数
this.$route.query.id

在以上前两种的方式中url是不拼接参数的，所以刷新详情页的时候取不到id，就拿不到对应的详情信息，而第三种方式是把参数拼接在url后面的，所以刷新页面的时候，参数在url链接上不会丢失，所以这一种传参方式比较保险。