zoukankan      html  css  js  c++  java
  • Vue-路由传参query与params

    注明:vue中 $router 和 $route 的区别 

    //$router : 是路由操作对象,只写对象
    //$route : 路由信息对象,只读对象
    
    //操作 路由跳转
    this.$router.push({
          name:'hello',
          params:{
              name:'word',
              age:'11'
         }
    })
    
    //读取 路由参数接收
    this.name = this.$route.params.name;
    this.age = this.$route.params.age;

    1、query传参

    query传参地址使用path(路由地址)和name(路由名称) 

    //传参,使用path跳转
    this.$router.push({
        path:'/login',
        query: {
            id:'123', 
            name: 'yangj'
        }
    })
    //路由
    import Login from '@/page/Login'
    {
      path: '/login',
      name: 'Login',
      component: 'Login'
    }
    //接收 
    id = this.$route.query.id; name = this.$route.query.name;

    //地址栏表现形式 这种方式感觉安全性不好暴露了参数,但是对于对隐私要求不强的页面可以这么玩
    http://localhost:8080/#/Login?id=123&name=yangj

    2、params传参

    query传参地址使用name(路由名称)

    //传参,使用name跳转
    this.$router.push({
        name:'Login',
        params: {
            id:'123', 
            name: 'yangj'
        }
    })
    //路由
    import Login from '@/page/Login'     
    {
      path: '/login/:id/:name', //这里的参数必须写(地址栏表现形式1),如果不写在页面强制刷新时参数会丢失(地址栏表现形式2)
      name: 'Login',
      component: 'Login'
    }
    //接收 
    id = this.$route.params.id; name = this.$route.params.name;

    //地址栏表现形式1
    http://localhost:8080/#/login/123456/yangj
    //地址栏表现形式2
    http://localhost:8080/#/login

    
    
    
    

    原文:https://blog.csdn.net/mf_717714/article/details/81945218     

  • 相关阅读:
    Hdu 1429 胜利大逃亡(续) (bfs+状态压缩)
    Vijos 1456 最小总代价 (状压dp)
    洛谷 P1313 计算系数 (二项式定理)
    洛谷 P1134 阶乘问题
    EINTR错误
    TCP和UDP协议的应用/参数查看
    BAT面经
    高级环境编程要看的
    UDP丢包和无序 问题的解决方法
    tcp/ip
  • 原文地址:https://www.cnblogs.com/yangchin9/p/10857819.html
Copyright © 2011-2022 走看看