精华内容
下载资源
问答
  • vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

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

    参考文章:

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

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


    备忘一下。


    展开全文
  • vue传参大致分为路由传参(?拼接传参)和动态路由传参 一、动态路由传参 定义路由 const routes = [ { path: '/first', name:'first', component:()=>import( '../components/first.vue' ) // ...

    vue传参大致分为路由传参(?拼接传参)和动态路由传参

    一、动态路由传参

    定义路由

    const routes = [
      {
        path: '/first',
        name:'first',
        component:()=>import( '../components/first.vue' )
        // component:first
      },
      {
          path: '/second',
          name:'second',
        component:()=>import( '../components/second.vue' )
      },
    ]

    router-link to 以对象形式跳转

    <template>
      <div id="app">
        <router-link :to="{name:'first',params:{name:'张三'}}">params</router-link>
    
        <router-link :to="{name:'second',query:{name:'李四'}}">query</router-link>
        <router-view></router-view>
      </div>
    </template>

    (1)params传参

     <h1>params对象传参{{$route.params.name}}</h1>

     

     

     

    (2)query传参

    发现query传参并没有会丢失  注意看地址栏 在一开始跳转的时候 发现就在url地址栏上以?拼接了参数路径,而params跳转时没有,所以说这也是params动态路由传参和query动态路由传参的区别,也是params对象传参为什么会消失的问题。

    解决params动态传参刷新后参数丢失问题

    因为params动态路由传参时,url地址并没有拼接,但是query会拼接在地址栏上,所以vue提供给我们另一种动态传参的方式,我们只需要在定义路由时在后面拼接/:name,就可以解决刷新后参数会丢失的问题,注意这里不是以?拼接了路径  

      {
        path: '/first/:name',
        name:'first',
        component:()=>import( '../components/first.vue' )
      },

     跳转

    <router-link to="/first/张三">params</router-link>

    当然 还有一种push写法 也是一样的道理 项目中也是用的比较多的

    对象跳转

        <a @click="$router.push({name:'first',params:{name:'张三'}})">a链接</a>

    $router.push 

      <a @click="$router.push('/first/张三')">a链接</a>

    二、路由传参  ?拼接

    只需要在路由的后面利用?的形式 进行参数的拼接

      <router-link to="/second?name=张三">?传参</router-link>
        <a @click="$router.push('/second?name=张三')">a链接</a>

    三、后退

            <a @click="$router.back()">回退</a>
            <a @click="$router.go(-1)">回退</a>

    go的功能还是比较强大的 正数可以前进  负数可以后退  里面的数字可以决定前进后退的层次

    展开全文
  • 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

    展开全文
  • vue路由传参刷新报错

    2019-10-11 10:55:06
    传参方式改为: this.$router.push({ path: "/result", query: { resultData:encodeURIComponent(JSON.stringify(res.data)) } }); 解析: this.resultData =JSON.parse(decodeURIComponent(this.$route....

    传参方式改为:

    this.$router.push({
     path: "/result",
     query: { resultData:encodeURIComponent(JSON.stringify(res.data)) }
       });

    解析:

            this.resultData =JSON.parse(decodeURIComponent(this.$route.query.resultData));
    

     

    展开全文
  • 在写项目的时候,使用params路由传参刷新页面,结果参数报错消失。 原因: 使用params传参的时候,当你跳转到子页面,如果你刷新页面,代表不是从父级页面跳转过来的,参数当然会消失。 问题解决: 1、使用query...
  • 主要介绍了vue路由传参页面刷新参数丢失问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 出现刷新后数据丢失的情况可分为,1、路由传参;2、从vuex获取参数 首先说一下 1、路由传参路由传参可分为query传参和params传参 (1)、query传参,参数会在地址栏中显示,如果你传的是字符串,刷新后页面的数据...
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接...
  • 解决vue 路由传参刷新页面数据丢失

    千次阅读 2018-12-17 18:54:18
    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 路由配置: 3.2 A组件传参...
  • vue路由传参刷新丢失

    2019-04-16 15:59:00
    没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router:[ { path:'/main', name:'main', component:Main }] //...
  • 引用:Vue路由传参及传参后刷新导致参数消失处理 - secretAngel - 博客园 项目功能需要,要从列表页跳转到详情页,需要携带参数id,在详情页获取并且使用 1 this.$router.push({name:'list', params...
  • vue 路由传参

    2020-01-09 16:47:34
    vue 路由传参 路由传参有3种形式,一种是params传参,一种是query传参,还有一种是字符串拼接 params传参需要和name结合使用,query传参既可以和path结合,也可以和name使用(如果记不住,可以记有2个m搭配结合...
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin",  //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上...
  • 在师弟页面进行页面刷新之后,会发现,没有数据了,原因排查发现,页面刷新后,路由传参过来的id没有了。进而导致请求不到数据,进行一些数据操作请求发送不出去。 问题解决: 将路由传参获取到的数据,存储到本地...
  • Vue路由传参

    2021-09-02 19:51:35
    我们在开发 vue 项目的时候,会经常用到路由传参。下面来说说 vue 路由传参的三种方式。 1、通过 router-link 的 to 属性进行传参 //组件中 <template> <div> <router-link to="{path:'/home',...
  • vue路由传参

    2019-06-21 21:50:53
    vue路由传参 //路由上配置要传递参数 <router-link :to="{name:'about',params:{id:item.id}}">点击跳转到B页面</router-link> vue传参方法一 1.路由定义配置 { path: "/about/:id", name: "about", ...
  • <template> <div class="hello"> <!-- to这样过去得也是params拿...但是刷新页面可以拿到 --> <router-link :to="'/news/'+id">跳啊跳</router-link> <h1 @click="toParams"&...
  • 文章目录vue路由传参方式一、页面刷新数据会丢失方法一:通过路由属性中的name来确定匹配的路由,通过params来传递参数*该方法可以隐藏URL后的参数方法二:使用Vue全局API:Vue.observable二、页面刷新数据不会丢失...
  • 1、当使用params传参时,刷新页面会导致参数丢失: onRouter() { this.$router.push({ name: 'Index', params: { mm: '0000' } }) }, 接受页面: mounted(){ console.log(this.$route.params.mm) }, 此...
  • vue路由传参总结

    2021-06-07 23:22:51
    一.Vue路由传参 1.route-link路由导航 在to跳转链接后传递参数,获取时需要在路由配置path时注明,con

空空如也

空空如也

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

vue路由传参刷新就没了

vue 订阅