vue-router之nuxt動態路由設置的兩種方法小結

方法一：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,   }); }