精华内容
下载资源
问答
  • vue路由传参刷新丢失

    2019-04-16 15:59:00
    没有系统学习过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}}

     

     

    4. 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

    转载于:https://www.cnblogs.com/wayneliu007/p/10717761.html

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

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

    参考文章:

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

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


    备忘一下。


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

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;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)

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

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

    我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

    通过路由属性配置传参我们可以用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的方式来解决问题。这里只是想告诉大家,问题的解决方案可以多种多样,要学会用多种方式或者说多种方案来解决一个问题,不要有太多的局限性!

    02aa7fc9cfedd5317993f93522083bc5.png

    作者:有梦想的咸鱼前端
    链接:https://www.jianshu.com/p/af698182c425

    展开全文
  • 在写项目的时候,使用params路由传参刷新页面,结果参数报错消失。 原因: 使用params传参的时候,当你跳转到子页面,如果你刷新页面,代表就不是从父级页面跳转过来的,参数当然会消失。 问题解决: 1、使用query...

    问题:

    在写项目的时候,使用params路由传参,刷新页面,结果参数报错消失。

    原因:

    使用params传参的时候,当你跳转到子页面,如果你刷新页面,代表就不是从父级页面跳转过来的,参数当然会消失。

    问题解决:

    1、使用query传参数,因为query是在链接之中携带的参数,相当于get请求,你即便刷新,链接也依旧携带了参数。
    2、存储于vuex之中,不过一般数据量不是太大,或者不是垮多个页面,亦或者其他方面的特殊需求,不建议使用。
    3、使用sessionStorage、localStorage,不建议使用,原因同上。

    关于vue路由传参的三种方式:

    1、路由配置改动,

    //路由配置
    routes: [
        {
          path: '/list/:id',
          name: 'list'
        }
    ]
    this.$router.push({name:'list', params:{id: id}});
    

    参数路由链接不可见,刷新页面数据消失
    2、params
    参数路由链接不可见,刷新页面数据消失
    3、query
    路由参数可见,刷新页面数据不会消失

    展开全文
  • vue传参大致分为路由传参(?拼接传参)和动态路由传参 一、动态路由传参 定义路由 const routes = [ { path: '/first', name:'first', component:()=>import( '../components/first.vue' ) // ...
  • 主要介绍了vue路由传参页面刷新参数丢失问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 出现刷新后数据丢失的情况可分为,1、路由传参;2、从vuex获取参数 首先说一下 1、路由传参路由传参可分为query传参和params传参 (1)、query传参,参数会在地址栏中显示,如果你传的是字符串,刷新后页面的数据...
  • 解决vue 路由传参刷新页面数据丢失

    千次阅读 2018-12-17 18:54:18
    1.数据丢失时的代码: 1.1 路由配置: 1.2 A组件传参: 1.3 B组件接收: 1.4 B组件url: 2.解决方案一: 2.1 路由配置: 2.2 A组件传参: 2.3 B组件接收: 2.4 B组件url: 3.解决方案二: 3.1 路由...
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接...
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin",  //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上...
  • 引用:Vue路由传参及传参后刷新导致参数消失处理 - secretAngel - 博客园 项目功能需要,要从列表页跳转到详情页,需要携带参数id,在详情页获取并且使用 1 this.$router.push({name:'list', params...
  • <template> <div class="hello"> <!-- to这样过去得也是params拿...但是刷新页面可以拿到 --> <router-link :to="'/news/'+id">跳啊跳</router-link> <h1 @click="toParams"&...
  • 1、当使用params传参时,刷新页面会导致参数丢失: onRouter() { this.$router.push({ name: 'Index', params: { mm: '0000' } }) }, 接受页面: mounted(){ console.log(this.$route.params.mm) }, 此...
  • 文章目录vue路由传参方式一、页面刷新数据会丢失方法一:通过路由属性中的name来确定匹配的路由,通过params来传递参数*该方法可以隐藏URL后的参数方法二:使用Vue全局API:Vue.observable二、页面刷新数据不会丢失...
  • vue 路由传参

    2020-01-09 16:47:34
    vue 路由传参 路由传参有3种形式,一种是params传参,一种是query传参,还有一种是字符串拼接 params传参需要和name结合使用,query传参既可以和path结合,也可以和name使用(如果记不住,可以记有2个m搭配结合...
  • 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路由传参

    2021-05-20 17:24:13
    vue路由传参的几种方式 1.不使用vue-route组件的 1.1 使用sessionstorage/localstorage传参 localstorage/sessionStorage.setItem(‘a’, “value”) //存值 localstorage/sessionStorage.getItem(‘a’) //取值 1.2...

空空如也

空空如也

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

vue路由传参刷新丢失

vue 订阅