通过Vue路由传参的两种方式及Vue组件中接收参数的方式
Posted niejunchan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过Vue路由传参的两种方式及Vue组件中接收参数的方式相关的知识,希望对你有一定的参考价值。
1. Vue传参方式
1.1 通过动态路由传参
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:
1
|
const User = {
|
在这个实例中,我们就可以通过:id这种方式实现把参数的值传递到组件中,现在呢,像 /user/foo 和 /user/bar这样的路由,将把参数值foo、bar通过参数名id传递。
1.2 通过路由URL中添加query参数传参
通过路由URL中添加query参数的方式,就和普通的http URL的get传参方式一样,通过在链接地址后面添加?queryName=queryValue的方式实现传参,如:
1
|
const User = {
|
2. 组件中接收参数的方式
通过路由将参数传递后,我们需要在组件中进行接收,这样才可以在需要用到此参数的地方拿到对应的参数值,对应着两种传参方式,也分别有两种接收参数的形式。
2.1 通过this.$router.params接收
形如/user/:id这种的动态路由参数,我们可以通过this.$router.params接收,如在路由/user/:id中,在组件中拿到id的值的代码如下:
1
|
var id = this.$route.params.id;
|
2.2 通过this.$router.query接收
形如/search?q=vue这种的通过在链接地址后面添加?queryName=queryValue的方式实现传参的方式,我们可以通过this.$router.query接收,如在/search?q=vue中,在组件中拿到q的值的代码如下:
1
|
var q = this.$route.query.q;
|
2.3 将路由中的参数设置到组件的props上
上面两种接收参数的方式,都是通过$route对象来获取参数值的,然而在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
因此,我们可以使用 props 将组件和路由解耦,用这种方式取代直接在组件中使用 $route 获取参数值的方式,代码示例如下:
1
|
const User = {
|
这样你便可以在任何地方使用该组件,使得该组件更易于重用和测试。
这里需要注意的是,props设置有三种模式
-
布尔模式
如果 props 被设置为 true,route.params 将会被设置为组件属性。1
2
3
4
5const router = new VueRouter({
routes: [
{ path: ‘/user/:id‘, component: User, props: true }
]
}) -
对象模式
如果 props 是一个对象,它会被按原样设置为组件属性。当 props 是静态的时候有用。1
2
3
4
5const router = new VueRouter({
routes: [
{ path: ‘/promotion/from-newsletter‘, component: Promotion, props: { newsletterPopup: false } }
]
}) -
函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。1
2
3
4
5const router = new VueRouter({
routes: [
{ path: ‘/search‘, component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})
URL /search?q=vue 会将 {query: ‘vue’} 作为属性传递给 SearchUser 组件。
以上是关于通过Vue路由传参的两种方式及Vue组件中接收参数的方式的主要内容,如果未能解决你的问题,请参考以下文章