vue路由传参的三种基本方式

最新推荐文章于 2023-04-04 20:03:22 发布

转的你死

最新推荐文章于 2023-04-04 20:03:22 发布

阅读量229

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/a493556721/article/details/83413846

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何使用router进行编程式和声明式的页面跳转，包括使用name和path方式进行导航，以及通过params和query传递参数的具体方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.router.push({ name: 'user', params: { userId:123 }}) // -> /user/123  
   对应配置为
   {
     path: '/user/:id',
     name: 'user',
     component: User
   }
   拿参数为
   this.$route.params.userId
2.router.push({ path: '/user/${userId}' }) // -> /user/123   
  对应配置为
    {
     path: '/user/:id',
     name: 'user',
     component: User
   }
   拿参数为
   this.$route.params.userId
3.router.push({ path: '/user', query: { userId: 123 }}) // -> /user?userId=123 
  对应配置为
    {
     path: '/user',
     name: 'user',
     component: User
   }
   拿参数为
   this.$route.query.userId
注意: 当使用path导航而不是name方式时，只能使用query，params将会失效
上述是编程式跳转,声明式的方法是
<router-link :to="将上述router.push中的内容放进来"></router-link>
详情见:https://router.vuejs.org/zh/guide/essentials/navigation.html