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, }); } |