vant/vue ——列表跳转到指定详情页获取数据的方法

简介: 列表跳转到指定详情页获取数据的方法

在原有的列表项中添加点击事件

dc9fc3d0b20f4801b7fa9f3adc23e480.png 新建一个路由页面(detail.vue)并配置好路径

在 有列表的页面中添加方法,并通过this.$router.push进行传参

navClick(index) {
      this.$router.push({
        path: "/detail",
        query: {
          detail: JSON.stringify(this.list[index]),
        },
      });
    },

因为上面的this.list[index]为数组,不能直接拿来使用。所以要把它转换成字符串的形式

之后在新建的Detail.vue(也就是详情页来获取列表页面中的参数)

file() {
      return this.$route.query.detail;
    },

然后可以渲染一下查看有没有导入参数成功

0f843c9b859d4ffebb1b84b4183323c5.png

2d66ae7c3bdf48d1b74fd97f62da95ed.png

获取成功后就要去写每次点击应该跳转到对应页面的接口

data() {
    return {
      conn: {},
    };
  },
  mounted() {
    this.ddetail();
  },
file(){
 //   return this.$route.query.detail;
     var con = JSON.parse(this.$route.query.detail)
     return this.conn = con
}

创建一个方法ddetail()

因为是根据id来获取对应的页面,所以这里要把得到的参数转换成对象,并且用一个空对象conn进行接收,之后就可以直接将空对象传进来的参数的id值放在请求中即可成功获取对应页面的数据!

ddetail() {
      this.$axios.get(`/goods/${this.conn.id}`).then((v) => {
        console.log(v);
      });
    },

3abfd52ddf554a62a29653a12b980c68.png


相关文章
|
3月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
246 1
|
3月前
|
JavaScript 前端开发
Vue开发必备:$nextTick方法的理解与实战场景
Vue开发必备:$nextTick方法的理解与实战场景
273 1
|
3月前
|
设计模式 JavaScript 开发工具
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
Vue开发中使用好钩子方法(hook method)可以使你的代码更加模块化和可维护
34 0
|
3月前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
92 0
|
3月前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
196 0
|
3月前
|
存储 JavaScript 前端开发
Vue.js项目中全面解析定义全局变量的常用方法与技巧
Vue.js项目中全面解析定义全局变量的常用方法与技巧
72 0
|
3月前
|
JavaScript
Vue路由传参实战指南:三种常用方法示例演示
Vue路由传参实战指南:三种常用方法示例演示
162 0
|
14天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
82 1
|
25天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
54 1
vue学习第一章