阅读量:0
在Vue.js中使用Vue Router进行路由管理时,传递和获取参数是常见的需求。这里介绍三种主要的路由传参和获取参数的方式:
1. 通过URL的查询参数(Query Parameters)
传递参数:
当你需要传递一些非敏感数据(如搜索查询),可以使用URL的查询参数(query)。这可以通过router.push
或this.$router.push
方法,并传递一个包含path
和query
的对象来实现。
this.$router.push({ path: '/some-path', query: { userId: 123 }});
这会导致URL变成/some-path?userId=123
。
获取参数:
在目标组件中,可以通过this.$route.query
来获取这些查询参数。
export default { created() { console.log(this.$route.query.userId); // 输出:123 } }
2. 通过路由的params参数(动态路由匹配)
定义路由:
首先,你需要在路由定义中使用动态片段(如:id
)来定义参数。
const routes = [ { path: '/user/:id', component: UserComponent } ];
传递参数:
当使用router.push
或<router-link>
时,不需要在params
中显式传递参数,而是通过路径中的动态片段来传递。
this.$router.push('/user/123');