id vue2路由传参_Vue中路由传参

路由传参并接收参数

注意点：在路由配置文件中，需要给组件定义路由后，才能在浏览器中输入地址访问该页面；若想传参并且获取参数，必须有下面这种路由配置

{

path:'/组件路由名称/:参数名称'，

component：组件名

}

组件中给路由传参

ps:传参时是this.$router,接收参数是this.$route`

1.$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

2.$route为当前router跳转对象，里面可以获取name、path、query、params等

传参：

直接在url中输入地址：【/组件路由名称/参数】

在相应的组件中，【$route.params.参数名获】取上面的参数

通过$router来实现传参

• argu{{item}}

path来实现

方案一：

methods:{

handerItem(name) {

this.$router.push({

path:\`/argu/${name}\`

})

}

}

需要对应路由配置如下：

{

path:'/argu/:name',

name:'Argu',

component:()=>import('@/components/argu')

}

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

注意点： 配置文件中参数前不仅要有‘/’还要有‘：’；但是在父组件中则不需要‘：’

方案二：

父组件：使用path来匹配路由，然后通过query来传递参数；这种情况下 query传递的参数会显示在url后面?id=？

父组件中：

methods:{

handerItem(name) {

this.$router.push({

path:\`/argu\`,

query:{

name:name

}

})

}

}

配置文件中：

{

path:'/argu',

name:'Argu',

component:()=>import('@/components/argu')

}

子组件中:

路由传参

获取到url的

{{$route.query.name}}

注意点：

父组件中在this.$router.push中使用path加query的方法时，配置文件中不能在path后面再加‘/:name’

在子组件中需要用$route.query.name来获取参数

在url中我们可以获取到‘？name=参数’，等同于GET请求

name来实现

方案一：

*父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数/:name*

methods:{

handerItem(name) {

this.$router.push({

name:'Argu',

params:{

name:name

}

})

}

}

对应路由配置: 这里可以添加:/name 也可以不添加，添加数据会在url后面显示，不添加数据就不会显示

不添加:/name的情况：

{

path:'/argu',

name:'Argu',

component:()=>import('@/components/argu')

}

在页面中：

添加:/name的情况:

通过path来实现参数

handerItem(name) {

this.$router.push({

path:`/argu/${name}\`

})

}

也可以用下面的其实都是一样的：

handerItem(name) {

this.$router.push({

path:'/argu',

params:{

name:name

}

})

}

小结

query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，

params相当于post请求，参数不会再地址栏中显示

补充：

当一个组件中有时，就要考虑，在配置路由时，这个组件下还有子组件

{

path:'/singer',

component:()=>import('components/singer/singer'),

children:[

{

path: ':id',

component: () => import('components/disc/disc')

}

]

}

跳转组件：

this.$router.push({

path:\`/singer/${id}\`,

})

接受组件：

this.$route.params.id