vue 列表页跳转详情页获取id以及详情页通过id获取数据


Posted in Javascript onMarch 27, 2019

1.先在router.js中配置路由

{
   path: '/movieDetail/:movieId',
   name: 'movieDetail',
   component:movieDetail
 }

2.获取详情页的id,并派发父组件事件(movieList.vue)页面

<li v-for="(item,index) in movies" :key="index" @click="selectItem(item)">
  。。。。。。。 
</li>
methods:{
     selectItem(item){
       //console.log(item.moveId);
       //var item = item.moveId;
       this.$emit('select',item);
 }

3.在movieShow页面引用movieList.vue页面

<movieList :movies="movies" @select="movieDetail"></movieList>
//转入电影详情页
      movieDetail(item){
       console.log(`${item.moveId}`);
       this.$router.push({
         path: `/movieDetail/${item.moveId}`
       })
     }

效果如下:

vue 列表页跳转详情页获取id以及详情页通过id获取数据

上面获取到了 id,接下来实现详情页通过id获取数据

1)先获取传过来的id

var movieId = that.$route.params && that.$route.params.movieId;

2)引用豆瓣网的API

  /v2/movie/subject/:id 单个电影条目信息

const url = `api/movie/subject/${movieId}`;
     that.$axios.get(url)
     .then((res)=>{
      console.log(res.data);
 })

效果如下

vue 列表页跳转详情页获取id以及详情页通过id获取数据

3)在页面中引用

<scroll class="movie-detail"
        :data="movieDetail"
    >
    。。。。。。
 </scroll>

在js中将movieDetail进行赋值   movieDetail = res.data

data(){
   return {
    movieDetail:{}
   }
  },
  created(){
    this._getDateil();  
  },
  components:{
   scroll
  },
  methods:{
   _getDateil(){
    var that = this;
    var movieId = that.$route.params && that.$route.params.movieId;
    console.log(movieId);
    //that.getMovieDetail(movieId);
    const url = `api/movie/subject/${movieId}`;
     that.$axios.get(url)
     .then((res)=>{
      
      console.log(res.data);
 
       movieDetail = res.data;
    })
   },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 #Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 #Javascript
vue中多个倒计时实现代码实例
Mar 27 #Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 #Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 #Javascript
JavaScript惰性载入函数实例分析
Mar 27 #Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 #Javascript
You might like
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
很实用的一个完整email发送程序
2006/10/09 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
javascript call和apply方法
2008/11/24 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Django开发中的日志输出的方法
2018/07/02 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
销售团队获奖感言
2014/08/14 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android