路由传参并接收参数
注意点:
在路由配置文件中,需要给组件定义路由后,才能在浏览器中输入地址访问该页面;若想传参并且获取参数,必须有下面这种路由配置
{
path:'/组件路由名称/:参数名称',
component:组件名
}
组件中给路由传参
ps:传参时是
this.$router,接收参数是
this.$route`
1.$router
为VueRouter实例,想要导航到不同URL,则使用$router.push
方法
2.$route
为当前router跳转对象,里面可以获取name、path、query、params
等
传参:
直接在url中输入地址:【/组件路由名称/参数】
在相应的组件中,【$route.params.参数名获】取上面的参数
通过$router来实现传参
<ul>
<li v-for="item in 3" @click="handerItem(item)"\>argu{{item}}</li>
</ul>
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')
}
子组件中:
<div>
<h2>路由传参</h2>
<p>获取到url的</p> {{$route.query.name}}
</div>
注意点:
- 父组件中在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请求,参数不会再地址栏中显示
补充:
当一个组件中有<router-view></router-view>时,就要考虑,在配置路由时,这个组件下还有子组件
{
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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。