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

客官°小女子只卖身不卖艺 2022-03-25 18:16 610阅读 0赞

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

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

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链接上不会丢失，所以这一种传参方式比较保险。