vue-router之nuxt動態路由設定的兩種方法小結
阿新 • • 發佈：2018-11-11
方法一：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,
});
}
|