• vue中路由传参



    概念: vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式。

    一:params传参

    params 传参又可分为 声明式 和 编程式 两种方式

    1.声明式 ,该方式是通过 router-link 组件的 to 属性实现,该方法的参数可以是一个字符串路径或者一个描述地址的对象。使用该方式传值的时候,需要子路由提前配置好参数,例如:

    //子路由配置
    {
      path: '/child/:id',
      component: Child
    }
    //父路由组件
    进入Child路由
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2.编程式路由,使用该方式传值的时候,同样需要子路由提前配置好参数,例如:

    //子路由配置
    {
      path: '/child/:id',
      component: Child
    }
    //父路由编程式传参(一般通过事件触发)
    this.$router.push({
        path:'/child/${id}',
    })
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    二:params传参

    params传参也可分为 声明式 和 编程式 两种方式,与方式一不同的是,这里是通过路由的别名 params进行传值的

    1.声明式,该方式也是通过 router-link 组件的 to 属性实现,例如:

    进入Child路由
    
    • 1

    2.编程式,使用该方式传值的时候,同样需要子路由提前配置好参数,例如:

    //子路由配置
    {
     // params 需要占位
      path: '/child/:id',
      name: 'Child',
      component: Child
    }
    //父路由编程式传参(一般通过事件触发)
    this.$router.push({
        name:'Child',
        params:{
        	id:123
        }
    })
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    三:query传参

    query 传参(显示参数)也可分为 声明式 和 编程式 两种方式

    1.声明式,该方式也是通过 router-link 组件的 to 属性实现,不过使用该方式传值的时候,需要子路由提前配置好路由别名(name 属性),例如:

    //子路由配置
    {
      path: '/child,
      name: 'Child',
      component: Child
    }
    //父路由组件
    进入Child路由
    
    //在child组件中获取路由传过来的参数参数
    {{$route.query.id}}
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    2.编程式使用该方式传值的时候,同样需要子路由提前配置好路由别名(name 属性),例如:

    //子路由配置
    {
      path: '/child,
      name: 'Child',
      component: Child
    }
    //父路由编程式传参(一般通过事件触发)
    this.$router.push({
        name:'Child',
        query:{
        	id:123
        }
    })
    
    //在child组件中通过以下代码来获取参数
    this.$route.query.id
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
  • 相关阅读:
    LLVM 插桩 LLVM IR PHI指令
    NewStarCTF 公开赛-web
    Chrome版本对应Selenium版本
    如何将多个PDF文件合并一步完成?
    webrtc推拉流 srs报错:DTLS_HANG DTLS: > Hang, done=0, version=-1, arq=0
    java.lang.ClassCastException: android.os.BinderProxy cannot be cast to ...
    EasyCVR获取大华客流量数据时有一个设备未上传该如何解决?
    1031 Hello World for U
    Java项目:JSP蛋糕甜品店管理系统
    yum 快速安装zookeeper、Kafka集群部署 es安装 logstash安装 kibina 分词器 redis
  • 原文地址:https://blog.csdn.net/liu0218/article/details/127540054