zoukankan      html  css  js  c++  java
  • vue 路由传参 params 与 query两种方式的区别

     初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query。然后,错误就这么来了:

       router文件下index.js里面,是这么定义路由的:

    {
          path:"/detail",
    name:"detail", component:home }

      我想用params来传参,是这么写的,嗯~

    复制代码

    this.$router.push({
     path:"/detail",
     params:{
     name:'nameValue',
     code:10011
     }
    });

    复制代码

      结果可想而知,接收参数的时候:

    this.$route.params.code     //undefined

      这是因为,params只能用name来引入路由,下面是正确的写法:

    复制代码
    this.$router.push({
       name:"detail",
       params:{
        name:'nameValue',
        code:10011
     }
    });
    复制代码

    这回就对了,可以直接拿到传递过来的参数nameValue了。

    说完了我的犯傻,下面整理一下这两者的差别:

    1、用法上的

      刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。

    注意接收参数的时候,已经是$route而不是$router了哦!!

    2、展示上的

      query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

    query:        

    params:    

    总结:刚学vue的时候,由于没有认真细致的看文档,导致在很多细小的坑里爬不上来,后来自己慢慢的走上正轨的时候,再去看文档,看到了很多原本可以避免的坑,想插死自己的心都有了!!

    加油爬坑,共勉!。

    松松:

     vue中,路由跳转,对于用name ,还是path , 我之前没有感觉,最近才意识到,用name的时候,不用考虑路由的结构,这样在路由结构需要有变动的时候,就没有历史包袱,不是知道大家是不是有同样的看法
  • 相关阅读:
    Servlet3.0-使用注解定义Servlet
    poj 1256 Anagram—next_permutation的神奇应用
    poj 1664 放苹果 (划分数)
    poj 1011 Sticks
    poj和hdu部分基础算法分类及难度排序
    Notepad++支持jQuery、html5、css3
    Codeforces Round #395 (Div. 2) C. Timofey and a tree
    Codeforces Round #390 (Div. 2) D. Fedor and coupons
    bazel-编译动态库
    bazel-编译多目标
  • 原文地址:https://www.cnblogs.com/weiqian/p/9081866.html
Copyright © 2011-2022 走看看