动态路由传参方式 (1)
index.js中
export default new VueRouter({
routes:[{
path:'/detail/:bookid',
component:detail
}]
})
elli.vue 列表页面中
<li
@click="$router.push(`/detail/${bookid}`)"></li> //bookid 是传递的参数
用params提取动态路由
detail.vue 详情列表
<span>书名{{$route.params.bookid}}</span>
动态路由传参方式 (2)
index.js中
export default new VueRouter({
routes:[{
path:'/detail/:bookid',
props:true,
component:detail
}]
})
elli.vue 列表页面中
<li
@click="$router.push(`/detail/${bookid}`)"></li> //bookid 是传递的参数
用params提取动态路由
detail.vue 详情列表
<template>
<span>书名{{bookid}}</span>
</template>
<script>
export default{
props:['bookid']
}
</script>
动态路由传参方式 (3)
index.js中
export default new VueRouter({
routes:[{
path:'/detail',
name:'detail',
props:true,
component:detail
}]
})
elli.vue 列表页面中
<li
@click="$router.push({name:'detail',query:{bookid}})"></li> //bookid 是传递的参数
用params提取动态路由
detail.vue 详情列表
<template>
<span>书名{{$route.query.bookid}}</span>
</template>