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 相关文章推荐
JavaScript与函数式编程解释
Apr 27 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
JScript中的条件注释详解
Apr 24 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
js实现简单商品筛选功能
Feb 02 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
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
laravel model 两表联查示例
2019/10/24 PHP
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
python修改字典内key对应值的方法
2015/07/11 Python
详解python调度框架APScheduler使用
2017/03/28 Python
python批量修改图片大小的方法
2018/07/24 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
PHP如何去执行一个SQL语句
2016/03/05 面试题
房地产出纳岗位职责
2013/12/01 职场文书
烹调加工管理制度
2014/02/04 职场文书
超市开学活动方案
2014/03/01 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB