zoukankan      html  css  js  c++  java
  • vue的params和query两种传参方式及URL的显示

    路由配置:

     // 首页
        {
          path: '/home',
          name:'home',
          component:Home
        },
     // 行情
         {
          path: '/markets',
          name:'market',
          component:Market
        },

    query传值和接收方式:

    传值 

    //第一种方式(字符串方式) 
    this.$router.push('/markets?id=1&name=饭饭') 
    
    //第二种方式(path方式) 
    this.$router.push({path:'/markets',query:{id:1,name:'饭饭'}}) 
    
    //第三种方式(name方式) 
    this.$router.push({name:'market',query:{id:1,name:'饭饭'}})

     URL显示:

    http://localhost:19091/#/markets?id=1&name=fanfan

     接收数据

    console.log(this.$route.query.id); // 1
    console.log(this.$route.query.name);// 饭饭

    params传值和接收方式

    传值

    //第一种方式
    this.$router.push('/markets/1/饭饭')
    //第二种方式
    this.$router.push({path:'/markets',params:{id:1,name:'饭饭'}})

    URL显示

    //第一种方式:(此时参数值在url种显示)
    http://localhost:19091/#/markets/1/饭饭
    
    //第二种方式:(此时参数及参数值都不在url种显示)
    http://localhost:19091/#/markets

    对于第一种方式的路由需要改为下边的配置,第二种方式不需要修改路由

       // 首页
        {
          path: '/home',
          name:'home',
          component:Home
        },
         // 行情
         {
          path: '/markets/:id/:name',
          name:'market',
          component:Market
        },

    接收数据

    console.log(this.$route.params.id);// 1
    console.log(this.$route.params.name);//饭饭

    总结:query和params传参方式不同之处在于,query传参会在url中显示参数以及参数值,params方式则不显示或者只显示对应值,且以‘/’方式显示,params方式不能用path方式传递参数,接收方式也不同

  • 相关阅读:
    Java中的内存分配机制
    javac程序的内存分配
    Linux/Ubuntu下解压命令
    Java跨平台原理
    Java数据类型中String、Integer、int相互间的转换
    Maven的安装、配置及使用入门
    Eclipse快捷键大全(转载)
    shell编程基础
    ubuntu 安装source insight
    ubuntu samba
  • 原文地址:https://www.cnblogs.com/fanfanZhao/p/12203152.html
Copyright © 2011-2022 走看看