vue 列表跳详情

<tr v-for="(itemm,idx) of nb" :class="{on:idx%2==0,off:idx%2!=0}" @click="detailsMilk(itemm.goat_number)">
	  <td>{{itemm.goat_number}}</td>
</tr>

methods

 //点击羊编号进入相应的详情页
        detailsMilk(num) {
          this.$router.push({
            path: '/tail',
            query: {
              sheep_number: num,
            },
          })
        },

详情页
created

console.log(this.$route.query.sheep_number);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 列表跳转详情页的实现方式有很多种。以下是其中一种常用的实现方式: 首先,在列表页中,需要为每一项列表内容绑定一个点击事件,当用户点击某一项时,跳转详情页。可以使用Vue Router来管理路由。 在列表项的点击事件中,可以调用Vue Router提供的编程式导航方法`this.$router.push()`来跳转详情页。可以使用params参数来传递需要展示的相关数据。示例代码如下: ```html <!-- 列表页 --> <template> <div> <ul> <li v-for="item in list" :key="item.id" @click="goToDetail(item.id)">{{ item.title }}</li> </ul> </div> </template> <script> export default { data() { return { list: [ { id: 1, title: '详情1' }, { id: 2, title: '详情2' }, { id: 3, title: '详情3' } ] }; }, methods: { goToDetail(id) { this.$router.push({ name: 'detail', params: { id } }); } } }; </script> ``` 接下来,在Vue Router的路由配置文件中,需要定义详情页的路由规则。示例代码如下: ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ routes: [ { path: '/list', name: 'list', component: ListComponent }, { path: '/detail/:id', name: 'detail', component: DetailComponent } ] }); ``` 最后,在详情页的组件中,可以通过`$route.params`来获取传递过来的参数,根据参数展示对应的详情内容。示例代码如下: ```html <!-- 详情页 --> <template> <div> <h2>{{ detail.title }}</h2> <p>{{ detail.content }}</p> </div> </template> <script> export default { data() { return { detail: {} }; }, created() { this.fetchDetail(); }, methods: { fetchDetail() { // 根据this.$route.params.id发送请求,获取对应的详情数据 const id = this.$route.params.id; // 发送请求获取详情数据,并将数据赋值给this.detail } } }; </script> ``` 通过以上步骤,就可以实现在Vue中从列表跳转详情页,同时传递参数并展示相应的详情内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值