zoukankan      html  css  js  c++  java
  • Vue路由传参及传参后刷新导致参数消失处理

    项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那么返回必然会重新拉取数据),一路百度,刚开始使用

    1
    this.$router.push({name:'list', params:{id: id}})

    在详情页获取参数:

    1
    this.$route.params.id

    试了一下,可以拿到数据,很开心,本以为这样就结束了,然后刷新了下页面,发现页面啥都没了(因为传过来的是URL),百度了下,原来这种传参刷新页面时参数会消失

    没办法,问了下老大,他说用query属性设置,于是就接着百度,找到大神的文章:https://blog.csdn.net/qq_43103581/article/details/82260073,套用里面的方法:

    1
    this.$router.push({ name: 'NewsDetail', query: { newsUrl: url } }) 
     
    然后在详情页这样获取参数:
    1
    this.$route.query.newsUrl
     
    保存,到页面上重新试了一下,没问题了。
     
     
    当然了,大神的文章里也介绍了另一种路由传参防止刷新参数消失的方法,也是使用最开始使用的那种方法,只是需要在路由中进行一些改动,下面我直接套用大神的代码说明:
    1
    2
    3
    4
    5
    6
    routes: [
        {
          path: '/list/:id',
          name: 'list'
        }
    ]
     
    1
    this.$router.push({name:'list', params:{id: id}});

    获取参数:this.$route.params.id即可

     
    总结:以上两种方法均可实现路由传参且防止刷新参数消失,喜欢哪种方法用哪种就好。
  • 相关阅读:
    luarocks argparse
    Shell中for循环的几个常用写法
    linux
    Docker修改镜像源为阿里云
    ntpdate更新服务器时间失败
    linux文本三剑客之 sed
    [Union]C++中Union学习笔记
    [sublime] 利用sublime搭建C/C++编译器
    [wordpress]WordPress地址(URL)错误,修改解决方案
    [wordpress]更新插件时,免去FTP操作
  • 原文地址:https://www.cnblogs.com/matd/p/11576696.html
Copyright © 2011-2022 走看看