zoukankan      html  css  js  c++  java
  • vue 之路由跳转及传参

       vue 之路由跳转有:

       1、 this.$router.push进行编程式路由跳转

        2、 router-link 进行页面按钮式路由跳转

      vue 之路由传参有:

        1、 this.$route.params获取路由传递参数

        2、this.$route.query获取路由传递参数

        区别: params 和 query 都是传递参数的,params不会在url上面出现,并且params参数是路由的一部分,是一定要存在的 query则是我们通常看到的url后面的跟在?后面的显示参数

     vue 之路由跳转及传参示例:

        .使用router-link进行路由导航,传递参数

         父组件:

         

      子组件中:使用this.$route.params.num来接收路由参数

         

        路由配置文件中:在路径绑定num参数

         

       地址栏中:

     

     二、直接调用$router.push 实现携带参数的跳转:  

         父组件中模板渲染中调用函数,传递参数

         
     
      子组件中:使用 this.$route.params.id  获取参数
         

     路由配置文件中:id用来为参数占位

         
     

        地址栏中

            

    三、通过路由属性中的name来确定匹配的路由,通过params来传递参数:使用name来匹配路由

         

        子组件中:依然使用 this.$route.params.id  接收参数

         
      路由配置文件中: 使用name配置
        
     地址栏中:不显示参数
       

    四、使用path来匹配路由,然后通过query来传递参数,这种情况下 query传递的参数会显示在url后面?id=?

         父组件中:使用query来传递参数

         
     

      子组件中:使用 this.$route.query.id来接收参数

        
     
       路由配置文件中:
       
     

       地址栏中:

        




  • 相关阅读:
    [洛谷P4725]【模板】多项式对数函数
    [洛谷P4841]城市规划
    [洛谷P4346][CERC2015]ASCII Addition
    [洛谷P3978][TJOI2015]概率论
    [洛谷P4656][CEOI2017]Palindromic Partitions
    [洛谷P4889]kls与flag
    [洛谷P3810]【模板】三维偏序(陌上花开)
    [洛谷P2613]【模板】有理数取余
    [bzoj4945][Noi2017]游戏
    [洛谷P4151][WC2011]最大XOR和路径
  • 原文地址:https://www.cnblogs.com/whx123/p/12101026.html
Copyright © 2011-2022 走看看