方法一：router-link
|
1
2
3
4
5
6
7
8
|
<div class=
"slide-item"
v-
for
=
"user in shareData.users"
>
<nuxt-link :to=
"'/community/member/'+ user.id"
>
<img src=
"../../static/head.png"
alt=
""
>
<p>{{user.nickname}}</p>
</nuxt-link>
</div>
|
注意：
1---to前面别忘记加一个冒号，作为动态路径，用变量理解
2--正常路由别忘记带引号（本身是字符串）
方法二：函数式路由
1.在listItem设置一个函数go(id）,准备跳转到详情页
前端精品教程：百度网盘下载
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div class=
"mov-container"
v-
for
=
"item in shareData.moments"
>
<div class=
"mov-item"
>
<div class=
"mov-img"
v-
for
=
"photo in item.moment.medias"
@click=
"go(item.moment.id)"
>
<img :src=
"photo"
alt=
""
>
<img src=
"../../assets/image/player.png"
alt=
""
class=
"player"
>
</div>
<div class=
"mov-con"
>{{item.moment.content}}</div>
<div class=
"mov-data"
>
<div class=
"mov-data-l"
><img :src=
"item.user.avatar"
alt=
""
><span>{{item.user.nickname}}</span></div>
<div class=
"mov-data-r"
:class=
"{bg1:chose1,bg2:chose2}"
@click=
"changeBg"
><span>{{item.moment.like}}</span> </div>
</div>
</div>
</div>
|
2.路径中加个参数即可
前端精品教程：百度网盘下载
|
1
2
3
4
5
|
go(id) {
this
.$router.push({
path:
'/comments/'
+ id,
});
}
|