vue的路由跳转及传参(编程式导航)

Posted mtxg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue的路由跳转及传参(编程式导航)相关的知识,希望对你有一定的参考价值。

1)直接在路由中传参

   this.$router.push( path: `/childPage/$id`, )

    需要对应路由配置如下:

 
   
     path: ‘/childPage/:id‘,
     name: childPage‘,
     component: childPage
   

获取参数:this.$route.parames.id

2) 通过路由属性中的name来确定匹配的路由,通过params来传递参数

   this.$router.push( name: childPage‘, params: id: id )

    需要对应路由配置如下:

    

      path: ‘/childPage‘,

      name: childPage‘,

      component: childPage

    

3) 使用path来匹配路由,然后通过query来传递参数

    this.$router.push( path: ‘/childPage‘, query: id: id )

     需要对应路由配置如下:

      

         path: ‘/childPage‘,

         name: childPage‘,

         component: childPage

      

  获取参数:this.$route.query.id

 

 

 

参考:https://segmentfault.com/a/1190000012393587?utm_source=tag-newest?

以上是关于vue的路由跳转及传参(编程式导航)的主要内容,如果未能解决你的问题,请参考以下文章

三、Uni-app + vue3 页面如何跳转及传参?

ReactNative进阶(四十六):页面跳转及传参

vue中组件3种编程式路由跳转传参

vue-router

Vue路由 -- 编程式导航

(尚044) vue编程式路由导航