例子:点击项目列表页,跳转到项目详情
列表页
方法一
点击列表页li元素跳转到详情页,并把项目id传给详情页,以便于详情页查询
<li v-for="(item,index) in demandList" @click="goDemandDetail(item.id)">
goDemandDetail(id){
this.$router.push({path: '/demanddetails/'+id})
},
路由:
{
path:'/demanddetails/:id',
name:'demanddetails',
component: () => import('../views/demanddetails/demanddetails'),
meta:{requireAuth:false}
},
项目详情页:
var projectID = this.$route.params.id;//获取传的参数
方法二
通过路由属性中的name确定匹配的路由,通过params传递参数
goDemandDetail(id){
this.$router.push({
name: 'demanddetails',
params:{
id:id
}
})
}
路由:
这里的“:/id”可有可无,如果有,添加数据则会在url后显示,不添加则不显示
{
path:'/demanddetails/:id',
name:'demanddetails',
component: () => import('../views/demanddetails/demanddetails'),
meta:{requireAuth:false}
},
项目详情页:
var projectID = this.$route.params.id;//获取传的参数
方法三
通过path匹配路由,通过query传参,这种情况url地址中会有?id=
goDemandDetail(id){
this.$router.push({
name: 'demanddetails',
query:{
id:id
}
})
},
路由配置
{
path:'/demanddetails',
name:'demanddetails',
component: () => import('../views/demanddetails/demanddetails'),
meta:{requireAuth:false}
},
详情页获取id
this.$route.query.id