Vue router中携带参数与获取参数

最新推荐文章于 2025-02-05 09:57:00 发布

原创最新推荐文章于 2025-02-05 09:57:00 发布 · 1.1w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue #python #网络 #url

本文详细介绍了Vue.js中路由参数传递的两种主要方式：Query和Params。Query方式通过URL查询字符串传递参数，如'/login?id=1'，而Params方式将参数嵌入URL路径中，如'/register/San'。在目标页面中，可以通过this.$route.query.id和this.$route.params.name来获取相应参数。了解这两种方法对于进行Vue应用的路由管理至关重要。

Vue路由路由参数传递的两种方式

Query方式

Query方式即是url参数，例如/login?id=1

<router-link :to="{ name:'login',query:{id:1} }">登录</router-link>

this.$router.push({
         path: '/login',
         query:{
               id:id,
          }
})

Params方式

Params方式即是url路径，例如/register/San

<router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link>

this.$router.push({
         name: 'monitor',
         params:{
               id:id,
          }
})

通过该方法配置的参数，需要在配置路由的时候给参数留个坑