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 相关文章推荐
js Html结构转字符串形式显示代码
Nov 15 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
javascript实现Table排序的方法
May 15 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
Vue 进阶之路(三)
Apr 18 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
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.ini 配置文件的深入解析
2013/06/17 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
python多线程用法实例详解
2015/01/15 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
python中pika模块问题的深入探究
2018/10/13 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
Python bytes string相互转换过程解析
2020/03/05 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
工程专业求职自荐书范文
2014/02/08 职场文书
主管会计岗位职责
2014/03/13 职场文书
高一学生期末评语
2014/04/25 职场文书
测控技术自荐信
2014/06/05 职场文书
捐款活动总结
2014/08/27 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
英文商务邀请函范文
2015/01/31 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers