精华内容
下载资源
问答
  • vue路由传参刷新丢失
    2020-12-22 15:46:35

    vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    参考文章:

    (1)vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    (2)https://www.cnblogs.com/dengyao-blogs/p/11399676.html


    备忘一下。


    更多相关内容
  • 主要介绍了vue路由传参页面刷新参数丢失问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • vue路由传参刷新丢失

    千次阅读 2022-06-29 11:48:17
    没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:‘main’,params:{‘id’: 123}})的,没有在路由定义中配置参数,如下: 复制代码 router:[ { path:‘/main’, name:‘main’, component:Main...

    没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:‘main’,params:{‘id’: 123}})的,没有在路由定义中配置参数,如下:

    复制代码
    router:[
    {
    path:‘/main’,
    name:‘main’,
    component:Main
    }]

    // 从index.vue,携带id=123跳到main.vue
    this.$router.push({name:‘main’,params:{‘id’:123}}
    复制代码
    所以一旦页面刷新就会丢失路由传过来的参数了。

    解决办法:

    1.不修改路由配置,使用sessionStorage来马上缓存(通常在created钩子函数中)获得的路由参数,这种方法要自己把握好什么时候set,什么时候get,什么时候remove。

    2.配置路由参数:配置后刷新不会丢失路由传参数

    复制代码
    router:[
    {
    path:‘/main/:id’,
    name:‘main’,
    component:Main
    }]

    // 从index.vue,携带id=123跳到main.vue
    this.$router.push({name:‘main’,params:{‘id’:123}}
    复制代码

    3.使用query

    复制代码
    router:[
    {
    path:‘/main/’,
    name:‘main’,
    component:Main
    }]

    // 从index.vue,携带id=123跳到main.vue
    this.$router.push({name:‘main’,query:{‘id’:123}}
    复制代码

    1. params与query

    params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params

    query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

    当使用params方法传参的时候,要在路由后面加参数名,成为路由的一部分,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以,另外query是拼接在url后面的参数,没有也没关系。

    https://blog.csdn.net/bluefish_flying/article/details/81011230

    好记性不如烂笔头,每天记录一点点

    展开全文
  • 出现刷新后数据丢失的情况可分为,1、路由传参;2、从vuex获取参数 首先说一下 1、路由传参路由传参可分为query传参和params传参 (1)、query传参,参数会在地址栏中显示,如果你传的是字符串,刷新后页面的数据...

    出现刷新后数据丢失的情况可分为,1、路由传参;2、从vuex获取参数
    首先说一下

    1、路由传参:

    路由传参可分为query传参和params传参
    (1)、query传参,参数会在地址栏中显示,如果你传的是字符串,刷新后页面的数据是不会丢失的,如果传的是对象或者是数组,那么刷新后,页面的数据就会丢失,此时解决的方法是,将复杂数据类型,传的时候转化成字符串,子组件接受的时候再转化过来,这样刷新后就不会丢失啦
    (2)、params传参,无论是你参数是字符串还是复杂数据类型,刷新后子组件的页面数据都会丢失
    解决办法:
    使用params中的路由匹配
    使用方式: 在router.js,即匹配路由规则的位置,加上占位符即可

    {
      path: '/index/:num/:name',
      name: 'index',
      component: Index
    }
    

    params中的参数名称需要和占位符的名称一致即可
    获取参数,还是和获取params中参数一致:this.$route.params.name
    这样的话,参数就会出现在url中,格式为:url/num/name,这种方式将参数放在url上,刷新的时候才不会丢失数据。

    综上所述,自己的出的一个小结论,如果不使用其他方法,只是路由传参,要想刷新后数据不丢失,你的参数就要出现再url地址中,虽然params传递的参数不出现在url地址,但是要想解决params传参数据刷新不丢失,还得把参数出现在url地址栏中

    2、从vuex获取参数

    页面刷新store.state中的数据消失是不可避免的,那么使用localStorage来避免这个问题。发现问题的时候我就考虑到存数据在localStorage里,但是一个一个数据添加实在是太蠢了。那么就需要一个全局的方法来,将store的数据存储在localStorage里。具体的方法也是百度的很好用,也很方便。

    在App.vue中,created初始化生命周期中写入以下方法
    
    自己项目中使用的方法
    //在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem('store')) {
          this.$store.replaceState(
            Object.assign(
              {},
              this.$store.state,
              JSON.parse(sessionStorage.getItem('store'))
            )
          )
        }
        //在页面刷新时将vuex里的信息保存到sessionStorage里
    
        window.addEventListener('beforeunload', () => {
          sessionStorage.setItem('store', JSON.stringify(this.$store.state))
        })
    
    作者的方法
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
      localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
    })
     
    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
    

    两种方法基本一致
    最后说一下,为什么vuex刷新后数据会丢失:
    其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值

    展开全文
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin",  //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上...

    今天做一个项目,页面直接传递的参数都非常好,但是一刷新就各种报错,一查原来url后面的传递的参数丢失了,于是便去找解决方案,下面总结一下:
    Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:

    方法一:params传参:

    this.$router.push({
        name:"admin",
        //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取)
        params:{id:item.id}
    })    
     
    //这个组件对应的路由配置
    {
      //组件路径
      path: '/admin',
      //组件别名
      name: 'admin',
      //组件名
      component: Admin,
    }
    

    通过params传递参数,如果我们想获取id的 参数值,我们可以通过this.$route.params.id这种方式来打印出来就可以得到了;(注意:获取参数的时候是$route,跳转和传参的时候是$router
    切记:用params传参,需要用name,用path虽然能跳转,但是页面this.$route.params.id拿不到

    $router : 是路由操作对象,只写对象
    $route : 路由信息对象,只读对象

    方法二:路由属性配置传参:

    this.$router.push({
        name:"/admin/${item.id}",
    })    
     
    //这个组件对应的路由配置
    {
      //组件路径
      path: '/admin:id',
      //组件别名
      name: 'admin',
      //组件名
      component: Admin,
    }
    

    通过路由属性配置传参我们可以用this.$route.params.id来获取到id的值,注意this.$router.push方法里面路径带的是值,路由配置项那里带的是变量名(属性名)来实现的对应;

    以上两种传参方式基本上可以理解为ajax中的post请求方式,参数都是不可见的,但是上面两种方法都有一个弊端,就是当页面刷新了是获取不到参数值的,那么有没有一种方法是页面刷新之后参数依然存在呢?

    方法三:query传参

    this.$router.push({
        name:"/admin",
         query:{id:item.id}
    })    
    //这个组件对应的路由配置
    {
      //组件路径
      path: '/admin',
      //组件别名
      name: 'admin',
      //组件名
      component: Admin,
    }
    

    第三种方式是用query来传参,这种方式是可以解决页面刷新参数消失问题的,这种方式可以理解为是ajax中的get方法,参数是直接在url后面添加的,参数是可见的,所以解决页面刷新参数消失问题建议使用方法三来解决;
    其实解决页面刷新参数丢失问题的方案还有很多,比如把参数存在sessionStorange或者localStorange中都是可行的,不过我们既然用vue框架,就要用vue的方式来解决问题。这里只是想告诉大家,问题的解决方案可以多种多样,要学会用多种方式或者说多种方案来解决一个问题,不要有太多的局限性!

       而我的项目由于之前被设置了刷新后截取url 的参数,所以方法3也解决不了,无奈只能老老实实使用sessionStorange,注意使用完清除掉就可以了。

    展开全文
  • vue传参大致分为路由传参(?拼接传参)和动态路由传参 一、动态路由传参 定义路由 const routes = [ { path: '/first', name:'first', component:()=>import( '../components/first.vue' ) // ...
  • 路由传参的时候出现刷新参数丢失问题,具体解决如下: 在进行路由配置的时候使用如下设置进行的配置,用的params方法进行参数传递。 { path: 'data-detail-edit/:type', component: () => import('@/views/...
  • 引用:Vue路由传参及传参后刷新导致参数消失处理 - secretAngel - 博客园 项目功能需要,要从列表页跳转到详情页,需要携带参数id,在详情页获取并且使用 1 this.$router.push({name:'list', params...
  • Vue路由传参详解

    2022-02-20 00:06:01
    vue组件传值的方式有很多种,其中路由传参也可以当作一种组件传值的方法,下面将列举几种路由传参的方法: 方法一:使用 router-link 进行声明式路由导航,传递参数 该方法是通过 router-link 组件的 to 属性进行...
  • 记录这几天在开发中遇见的一个关于路由传参后,页面刷新数据丢失的问题。场景如下:我需要携带参数id跳转到考试页面,在考试页面接收id,但是当考试页面刷新后,参数id就丢失了。(当时我是通过params传参的) 传参...
  • vue路由传参刷新页面不丢失参数

    千次阅读 2020-01-01 03:28:11
    通过配置name传参,name是你要跳转的路由名字 this.$router.push({ name: 'content', params: { id: id } }) 在content页面,使用params获取 created () { this.articleId = this.$route.params.id } 在...
  • vue路由传参的两种方式

    千次阅读 2022-06-14 14:31:57
    vue路由传参的两种方式
  • vue项目的路由传参常用的有两种方式:query和params 1.query传参 特点: 1.1可以用path也可以用name传递路径 注意name是路由页面vue文件的名称 不需要/ 1.2跳转页面地址栏可以看到路径和参数 通过 this.$route....
  • 1、当使用params传参时,刷新页面会导致参数丢失: onRouter() { this.$router.push({ name: 'Index', params: { mm: '0000' } }) }, 接受页面: mounted(){ console.log(this.$route.params.mm) }, 此...
  • vue路由传参两种方式区别-刷新pq参数不消失-np参数消失
  • vue路由传参的几种方式

    千次阅读 2022-03-11 18:44:17
    vue路由传参的几种方式 一 路由后直接携带参数 `例如:页面a跳转到页面b 页面a: 路由: 页面b: 路由: 二.利用params传参 例如:页面a跳转到页面b 页面a: 路由: 页面b: 路由: 三.利用query传参 例如:页面...
  • vue路由传参

    2022-09-02 20:31:21
    vue路由传参的四种方式
  • vue-router 路由跳转传参刷新页面后参数丢失问题

    千次阅读 多人点赞 2022-02-15 09:49:18
    1、通过params方式传参 通过$route.push的path携带参数方式(路由配置中指定参数) // 路由配置 { path: '/detail/:id', //若id后面加?代表这个参数是可选的,即使不传id也不会导致页面无法访问 name: 'detail',...
  • Vue路由传参

    2022-04-25 19:40:22
    Vue路由传参 方式一:配置动态路由 页面刷新,参数不会消失 URL路径中会显示传递的参数 // 1. 路由配置文件中配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //2. 使用,跳转...
  • 在页面跳转中,我通过路由传参,结果发现页面参数丢失了。路径返回了根目录。。。。 先说下路由传参的几种方式吧? 比如:<div v-for=“item in items” @click=“get(item.id)”> 传参方式1: 1) get:...
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接...
  • vue路由传参【vue路由原理、区别】

    千次阅读 2022-04-25 08:57:23
    vue路由传值主要通过 query 和 params 来实现 方法1、query query传参就是在url地址后面拼接 ?参数名=参数值 优点:通用性比较好,刷新数据不会丢失 例如 rourer-link to=”/goods?id=1001” this.$router.push({...
  • vue路由传参的四种方式

    千次阅读 2021-09-09 11:00:32
    vue路由传参 一、router-link路由导航 父组件:使用<router-link to = "/跳转路径/传入的参数"></router-link> 子组件:this.$route.params.num接收父组件传递过来的参数 mounted () { this.num = ...
  • vue路由传参的三种方式以及页面刷新参数丢失问题一、路由传参的三种方式1、传参方式一:params传参2、传参方式二:路由属性配置传参3、传参方式三:query传参二、三种传递方式的区别 一、路由传参的三种方式 1、传参...
  • Vue路由 传参几种方式

    千次阅读 2022-07-09 18:34:41
    接收方法: 所以为了防止不传参时,...name是给路由起的别名,由于路径太长不便于操作,类似 : 姓名 身份证号a===/news/detail 其中detail是news的子路由但地址栏始终是path的路径,最重要的应用场景是配合.........

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,034
精华内容 813
关键字:

vue路由传参刷新丢失